layui 选项卡tab切换事件监听 iframe内容刷新

最新推荐文章于 2023-09-14 10:08:31 发布

Aimyone

最新推荐文章于 2023-09-14 10:08:31 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/118730247

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何在使用layui框架构建的tab切换页面中，通过修改代码实现数据刷新问题。通过设置`<iframe>`的`location.reload(true)`，解决了多个iframe内容不能实时更新的问题。详细步骤包括引入layui插件、修改`<script>`部分的事件监听和调用reload方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>