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

清疚 2023-10-17 17:13 13阅读 0赞

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

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

![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="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>
    
    </body>
    </html>

[tab]: https://img-blog.csdn.net/20171204110640236?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMTY1NzA2MDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast