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>

你可能感兴趣的:(java,web开发,工作)