Tab页切换时页面自动刷新效果

来源：互联网发布：大连东华软件股份公司编辑：程序博客网时间：2024/06/06 19:59
Tab页切换时页面自动刷新效果

由于工作中奇葩的需求和页面设计，如下：

tab页效果
效果要求：tab页切换时要刷新一次页面，但问题是整个父页面加载时，全部iframe页面也会同时加载并缓存在浏览器，因此有了以下做法：每个tab实际对应的是一个iframe页面
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/webpage/include/taglib.jsp"%><html><head>    <title>预算管理</title>    <meta name="decorator" content="default"/>    <script type="text/javascript">        $(document).ready(function() {        //tab页面切换 页面刷新效果            $('ul.nav-tabs>li>a').on('click',function() {                var $this = $(this);                var divId = $this.attr("href");                var srcVal = $(divId).children("iframe").attr("src");                $(divId).children("iframe").attr("src",srcVal);            });        });    </script></head><body class="gray-bg"><!-- <div class="wrapper wrapper-content"> -->    <div class="ibox">    <div class="ibox-content">        <div class="tabs-container">            <ul class="nav nav-tabs">                <li class="active"><a data-toggle="tab" href="#tab-1" id="actve1">财务科目设置</a></li>                <li class=""><a data-toggle="tab" href="#tab-2" id="actve2">本企业财务科目</a></li>                <li class=""><a data-toggle="tab" href="#tab-3" id="actve3">预算编制</a></li>                <li class=""><a data-toggle="tab" href="#tab-4" id="actve4">审批</a></li>                <li class=""><a data-toggle="tab" href="#tab-5" id="actve5">预算执行统计</a></li>            </ul>            <div class="tab-content">                <!-- 财务科目设置 -->                <div id="tab-1" class="tab-pane active">                    <iframe id="allSubjectIframe" name="allSubjectIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeAllSubject"></iframe>                </div>                <script type="text/javascript">                    //计算iframe框架页面 height width                    function allSubjectIframe(){                        var iframe = document.getElementById("allSubjectIframe");                        try{                        var bHeight = iframe.contentWindow.document.body.scrollHeight;                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                        var height = Math.max(bHeight, dHeight);                            iframe.height = height;                        }catch (ex){}                    }                    window.setInterval("allSubjectIframe()", 200);                </script>                <!-- 本企业财务科目-->                <div id="tab-2" class="tab-pane">                    <iframe id="subjectIframe" name="subjectIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeSubject"></iframe>                </div>                <script type="text/javascript">                    function subjectIframe(){                    var iframe = document.getElementById("subjectIframe");                    try{                    var bHeight = iframe.contentWindow.document.body.scrollHeight;                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                    var height = Math.max(bHeight, dHeight);                        iframe.height = height;                    }catch (ex){}                    }                    window.setInterval("subjectIframe()", 200);                </script>                <!-- 预算编制-->                <div id="tab-3" class="tab-pane">                    <iframe id="planIframe" name="planIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeBudgetPlan"></iframe>                </div>                <script type="text/javascript">                    function planIframe(){                    var iframe = document.getElementById("planIframe");                    try{                    var bHeight = iframe.contentWindow.document.body.scrollHeight;                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                    var height = Math.max(bHeight, dHeight);                        iframe.height = height;                    }catch (ex){}                    }                    window.setInterval("planIframe()", 200);                </script>                <!-- 审批-->                <div id="tab-4" class="tab-pane">                    <iframe id="approvalIframe" name="approvalIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeBudgetApproval"></iframe>                </div>                <script type="text/javascript">                    function approvalIframe(){                    var iframe = document.getElementById("approvalIframe");                    try{                    var bHeight = iframe.contentWindow.document.body.scrollHeight;                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                    var height = Math.max(bHeight, dHeight);                        iframe.height = height;                    }catch (ex){}                    }                    window.setInterval("approvalIframe()", 200);                </script>                <!-- 预算执行统计-->                <div id="tab-5" class="tab-pane">                    <iframe id="budgetSummaryIframe" name="budgetSummaryIframe" frameborder="0" scrolling="auto" width="100%" src="${ctx}/budget/summary/financeBudgetSummary/list"></iframe>                </div>                <script type="text/javascript">                    function budgetSummaryIframe(){                    var iframe = document.getElementById("budgetSummaryIframe");                    try{                    var bHeight = iframe.contentWindow.document.body.scrollHeight;                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                    var height = Math.max(bHeight, dHeight);                        iframe.height = height;                    }catch (ex){}                    }                    window.setInterval("budgetSummaryIframe()", 200);                </script>            </div>        </div>    </div>    </div><!-- </div> --></body></html>
阅读全文
0 0