layui Tab怎么实现切换选项卡时自动刷新当前iframe

夜墨姑娘_8337

夜墨姑娘_8337

2026-10-22

616人浏览

原创

切换tab时自动刷新对应iframe,需监听tab切换事件获取lay-id,用data-frameid精准匹配iframe,通过重设带时间戳的src触发加载,缓存lastactiveid防重复触发。

layui tab怎么实现切换选项卡时自动刷新当前iframe

切换 Tab 时自动刷新当前 iframe,核心是监听 tab 切换事件、精准定位对应 iframe、安全重载其内容,同时避免跨域报错和重复触发。

监听 tab 切换并获取当前激活 ID

使用 Layui 的 element 模块监听 tab 事件,从高亮的 tab 标签中读取 lay-id:

  • 确保每个 tab 标签都设置了唯一的 lay-id 属性(如 lay-id="user-list")
  • 在回调中用 $('.layui-tab-title .layui-this').attr('lay-id') 获取当前激活项 ID
  • 不要依赖 data.index 或 DOM 顺序,它们不可靠

精准定位并刷新对应 iframe

iframe 必须与 tab 标签通过标识关联,推荐用 data-frameid 匹配:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 每个 iframe 添加 data-frameid="user-list",值与 tab 的 lay-id 一致
  • 用 $('iframe[data-frameid="' + id + '"]') 查找目标 iframe 元素
  • 执行 $iframe.attr('src', $iframe.attr('src') + '?t=' + Date.now()) 触发真实加载
  • 不使用 contentWindow.location.reload() —— 跨域时会报错

防止重复点击连刷

layui 的 tab 事件对同一 tab 的多次点击都会触发,需手动去重:

  • 声明变量 let lastActiveId = '' 缓存上一次激活的 ID
  • 进入回调后先比对:if (id === lastActiveId) return;
  • 比对通过后再执行 src 重设,并立即更新 lastActiveId = id
  • 不依赖 .layui-show 判断是否显示——它和 iframe 加载不同步

补充:动态 Tab 场景下的注意事项

若 Tab 是运行时添加(如菜单从接口加载),需确保:

  • 新增 Tab 时,iframe 的 data-frameid 和 tab 的 lay-id 严格一致
  • iframe 的 src 值带完整路径,避免相对路径导致跨域或 404
  • 首次打开 Tab 时不刷新(只在重复点击已激活 Tab 时刷新),符合常规交互预期
  • 调试时可在重设 src 前加 console.log('refreshing:', id) 验证逻辑是否命中

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
iframe写法有哪些
iframe写法有哪些

iframe写法有基本Iframe写法、嵌套Iframe写法、自适应宽高的Iframe写法、带有样式和属性的Iframe写法、内联Iframe写法和使用JavaScript动态创建Iframe写法。种写法都有自己的特点和适用场景。根据实际需求,选择合适的写法可以实现所需的功能和效果。

2023.10.19

2343

8

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

2026.10.22

0

15

PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

2026.10.22

0

12

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

2026.10.22

0

16

剧云故事大纲与分场规划教程
剧云故事大纲与分场规划教程

本专题讲解剧云梗概与多级大纲功能,覆盖全局、分集、分场结构生成,以及主线冲突、剧情节点和场次顺序调整。

2026.10.22

0

15

VibeKnow PPT讲解视频教程汇总
VibeKnow PPT讲解视频教程汇总

本专题介绍VibeKnow PPT讲解模式的素材准备、旁白生成、页面节奏、画面呈现与导出设置,适合课程和培训场景。

2026.10.22

0

16

VibeKnow PDF转视频教程合集
VibeKnow PDF转视频教程合集

本专题围绕VibeKnow的PDF转视频功能,讲解文件准备、内容解析、脚本生成、重点可视化及配音字幕检查方法。

2026.10.22

0

12

二狗PPT模板与视觉设计
二狗PPT模板与视觉设计

本专题介绍二狗PPT的职场模板、主题风格与页面版式,覆盖模板切换、色彩选择、内容匹配和正式汇报场景下的视觉优化方法。

2026.10.22

0

13

php漏洞修复方法
php漏洞修复方法

PHP漏洞聚合专题,持续整理PHP最新高危漏洞、CVE安全预警、受影响版本、自查命令及修复方案,覆盖PHP-FPM、Docker、Ubuntu与Linux服务器环境,帮助开发者快速完成漏洞排查、版本升级和安全加固。

2026.10.22

20

31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.2万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习