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>
版权声明：本文为qq_16570607原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。