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

最新推荐文章于 2024-04-23 15:26:18 发布

qq_16570607

最新推荐文章于 2024-04-23 15:26:18 发布

阅读量1.4w

点赞数

文章标签： java-web js jquery

本文链接：https://blog.csdn.net/qq_16570607/article/details/78700472

版权

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>