我们通常在一个主框架界面会嵌套多个Tabs, 当在浏览器打开该页面，会导致多个Tabs同时候请求页面数据，这样处理不但会给后台的数据库造成比较大的压力，同时也比较浪费流量。所以有必要实现这样的效果：同一个界面嵌套多个Tab，点击/选中后才执行加载。下面是两种实现方案的对比：
一、同时加载所有Tabs
<!-- ifame的'src'如果赋值，则会自动发起请求，下面每个iframe的src都有初始值，相当于所有的tabs都会同时加载 -->
<div class="easyui-tabs" style="width:100%; height:100%" data-options="region:'center', tabPosition:'top', fit:true, border:false">
<div title="数据统计" data-options="tabWidth:112" style="padding:0px">
<iframe id="statis" scrolling="no" frameborder="0" src="${ctx}/admin/statis" style="width:100%; height:100%;"></iframe>
</div>
<div title="首页轮播" data-options="tabWidth:112" style="padding:0px">
<iframe id="banner" scrolling="no" frameborder="0" src="${ctx}/admin/banner" style="width:100%; height:100%;"></iframe>
</div>
<div title="首页频道" data-options="tabWidth:112" style="padding:0px">
<iframe id="channel" scrolling="no" frameborder="0" src="${ctx}/admin/channel" style="width:100%; height:100%;"></iframe>
</div>
<div title="教材目录" data-options="tabWidth:112" style="padding:0px">
<iframe id="category" scrolling="no" frameborder="0" src="${ctx}/admin/category" style="width:100%; height:100%;"></iframe>
</div>
<div title="教材管理" data-options="tabWidth:112" style="padding:0px">
<iframe id="content" scrolling="no" frameborder="0" src="${ctx}/admin/material" style="width:100%; height:100%;"></iframe>
</div>
</div>二、点击/选中Tab后才加载
<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>
<html>
<head>
<title>后台信息管理</title>
<%@ include file="/common/meta.jsp"%>
<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
initTabs();
});
//延迟加载tab，避免所有tabs同时请求加载页面
//参考1：https://my.oschina.net/u/2331760/blog/5481398
//参考2：https://blog.csdn.net/weixin_30251587/article/details/96632084
function initTabs() {
var url = "";
$("#tabs").tabs({
onSelect:function(title,index){
var tab = $(this).tabs('getTab', index);
var tabName = $(tab).panel("options").title;
//alert(tabName);
switch(tabName){
case '数据统计':
url = "${ctx}/admin/statis";
break;
case '首页轮播':
url = "${ctx}/admin/banner";
break;
case '首页频道':
url = "${ctx}/admin/channel";
break;
case '教材目录':
url = "${ctx}/admin/category";
break;
case '教材管理':
url = "${ctx}/admin/material";
break;
}
if (!checkInitIframe(tab) || !isSameIframe(tab,url)){
//如果tab没有url,或者和前一个url不是同一个,则刷新iframe
refreshMyTab(tab,url);
}
},
onUnselect:function(title,index){
}
});
}
//根据指定url刷新iframe
function refreshMyTab(tab,src){
$(tab.find('iframe')[0]).attr('src',src);
}
//判断iframe是否有url,即iframe是否已经初始化
function checkInitIframe(tab){
return $(tab.find('iframe')[0]).attr('src');
}
//判断iframe的url是否和最新的url是否相同
function isSameIframe(tab,src){
if($(tab.find('iframe')[0]).attr('src') == src){
return true;
}
return false;
}
</script>
</head>
<body>
<!-- ifame的src如果赋值，则会自动发起请求，下面第一个iframe的src有初始值，会自动加载，其余都没有初始值，只有在tab选中后，才对src赋值并加载页面，相当于延迟加载 -->
<div id="tabs" class="easyui-tabs" style="width:100%; height:100%" data-options="region:'center', tabPosition:'top', fit:true, border:false">
<div title="数据统计" data-options="tabWidth:112" style="padding:0px">
<iframe id="statis" scrolling="no" frameborder="0" src="${ctx}/admin/statis" style="width:100%; height:100%;"></iframe>
</div>
<div title="首页轮播" data-options="tabWidth:112" style="padding:0px">
<iframe id="banner" scrolling="no" frameborder="0" src="" style="width:100%; height:100%;"></iframe>
</div>
<div title="首页频道" data-options="tabWidth:112" style="padding:0px">
<iframe id="channel" scrolling="no" frameborder="0" src="" style="width:100%; height:100%;"></iframe>
</div>
<div title="教材目录" data-options="tabWidth:112" style="padding:0px">
<iframe id="category" scrolling="no" frameborder="0" src="" style="width:100%; height:100%;"></iframe>
</div>
<div title="教材管理" data-options="tabWidth:112" style="padding:0px">
<iframe id="content" scrolling="no" frameborder="0" src="" style="width:100%; height:100%;"></iframe>
</div>
</div>
</body>
</html>