layui 选项卡tab切换事件监听 iframe内容刷新
1，效果图
2，tab切换展示代码（datapage.jsp）
// 注意：要引入layui相关的插件
<body>
<div class="layui-tab layui-tab-brief" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">数据</li>
<li>查询</li>
<li>查询</li>
<li>查询</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="laydateDemo1">
<div style="background: #ffffff;">
<iframe id="rptFrame1" runat="server" scrolling="no" frameborder="0" src="/*/topage?id=${id}" style="width: 100%;height: 92%;"></iframe>
</div>
</div>
</div>
<div class="layui-tab-item">
<div id="laydateDemo">
<div style="background: #ffffff;">
<iframe id="rptFrame2" runat="server" scrolling="no" frameborder="0" src="/*/topage?id=${id}" style="width: 100%;height: 92%;"></iframe>
</div>
</div>
</div>
<div class="layui-tab-item">
<div id="pageDemo3">
<div style="background: #ffffff;">
<iframe id="rptFrame3" runat="server" scrolling="no" frameborder="0" src="/*/topage?id=${id}" style="width: 100%;height: 92%;"></iframe>
</div>
</div>
</div>
<div class="layui-tab-item">
<div id="pageDemo4">
<div style="background: #ffffff;">
<iframe id="rptFrame4" runat="server" scrolling="no" frameborder="0" src="/*/topage?id=${id}" style="width: 100%;height: 92%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
3，Java代码
@RequestMapping("topage")
public String getLookPage(@RequestParam HashMap<String, String> paraMap,Model model){
ClogEntity entity=clogEntityDao.findById(paraMap.get("id")).get();
model.addAttribute("costdatatime",entity.getCostdatatime());
model.addAttribute("yqcode",entity.getYqcode());
model.addAttribute("faid",entity.getFaid());
model.addAttribute("taskid",paraMap.get("taskid"));
return "cbhs/**Look";
}
4，**Look.jsp页面
<body>
<div class="fapz-content">
<div style="width:70.5%;float:left;display:inline-block;=overflow-x: auto">
<table id="weidatagrid1" lay-filter="weidatagrid1"></table>
</div>
<div id="trees" style="width:28%;float:left;display:inline-block;margin-left: 0.5%">
<table id="weidatagrid2" lay-filter="weidatagrid2" ></table>
</div>
</div>
</body>
<script>
var totalrecord=0;
var h = document.body.clientHeight
var w = document.body.clientWidth
var pages;
layui.config({
base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
version: 'v1.5.10' // 插件版本号
}).extend({
soulTable: 'soulTable/soulTable',
tableChild: 'soulTable/tableChild',
tableMerge: 'soulTable/tableMerge',
tableFilter: 'soulTable/tableFilter',
excel: 'soulTable/excel',
treeGrid:'treegrid/treeGrid'
});
layui.use(['form','table','soulTable','laypage','layer','tree', 'util','laydate'],function(){
//入口函数
})
</script>
5，关于iframe
iframe属性解析：
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持
6，所遇问题
在这个tab切换的过程中，tab选项卡里面的iframe页面内容不能刷新的问题，如图
根据官网知识点
在tab切换页面(datapage.jsp)中修改代码为：
document.getElementById(“iframe的id”).contentWindow.location.reload(true)
<script>
layui.config({
base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
version: 'v1.5.10' // 插件版本号
}).extend({
soulTable: 'soulTable/soulTable',
tableChild: 'soulTable/tableChild',
tableMerge: 'soulTable/tableMerge',
tableFilter: 'soulTable/tableFilter',
excel: 'soulTable/excel',
treeGrid:'treegrid/treeGrid',
dltable: 'treegrid/dltable',
xmSelect:'xmSelect/xm-select'
});
layui.use(['form','table','soulTable','laypage','layer','xmSelect', 'util','laydate','tree','treeGrid','jquery'],function(){
layui.element.on('tab(demo)', function(){
document.getElementById("rptFrame2").contentWindow.location.reload(true)
document.getElementById("rptFrame1").contentWindow.location.reload(true)
document.getElementById("rptFrame3").contentWindow.location.reload(true)
document.getElementById("rptFrame4").contentWindow.location.reload(true)
location.hash = 'demo='+ this.getAttribute('lay-id');
});
})
</script>