直接改单个 iframe 的 src 实现轮播最轻量：定时器 + URL 数组 + 清空 src 再赋值 + onerror 兜底；禁用多 iframe 避免资源超限、跨域失效和内存泄漏；跨域加载用 postMessage 通信并设超时，用户交互需布尔开关控制暂停恢复。
直接改 iframe 的 src 属性就能实现轮播，不需要同时挂多个 iframe 元素——否则容易触发浏览器资源限制、跨域异常或内存泄漏。
用 setInterval 动态切换 src 最轻量
核心就是定时器 + URL 数组 + 单个 iframe 实例。每次只更新 src，不创建也不删除 DOM 节点，避免残留和重排开销。
-
setInterval控制间隔（比如 10000ms），别用setTimeout递归，容易失步或累积延迟 - URL 数组要预先定义好，确保每项都是合法可访问的绝对地址（相对路径在跨域 iframe 中可能失效）
- 切换前建议清空旧
src：先设iframeEl.src = ""，再赋新值，防止浏览器复用缓存或加载卡住 - 如果某页加载失败（如 404 或跨域拒绝），
iframe会停留在上一页或空白，需监听onerror做兜底跳过
为什么不能同时保留多个 iframe
看似“预加载”能减少白屏，实际问题更多：
- 每个
iframe都会独立发起网络请求、解析 HTML、执行 JS，5 个同时开就是 5 倍资源消耗 - 多数浏览器对同源/跨域 iframe 并发数有限制（通常 6～10 个），轮播列表一多就卡死或静默失败
- 跨域
iframe无法被父页监听load事件，你根本不知道它是否真加载完成了 - DOM 中残留未销毁的
iframe可能导致内存泄漏，尤其在长时间运行的数字看板场景下
如何安全处理跨域子页面加载状态
父页面无法读取跨域 iframe 的内容或生命周期事件，所以不能依赖 load 回调来驱动下一轮切换。
- 不要写
iframeEl.addEventListener("load", ...)然后等它触发再切——跨域时这个事件压根不会触发 - 改用固定间隔轮播，靠视觉容忍短时白屏或 loading 态；若需更稳，让子页面自己在
window.onload后主动发postMessage通知父页“我好了” - 子页面加脚本：
window.parent.postMessage({ type: "READY" }, "*")；父页监听message事件，匹配event.source === iframeEl.contentWindow再推进索引 - 必须加超时兜底：比如等待 8 秒没收到 READY，就强制切到下一个，避免卡死
轮播中断与恢复的常见坑
用户操作（悬停、点击）需要暂停，但 resume 时容易出错。
- 暂停不能只
clearInterval(timerId)就完事——恢复时得重新setInterval，否则定时器丢失 - 别在
mouseenter里直接clearInterval，而是在mouseleave里重新启动，中间间隙可能漏切 - 更稳妥的做法是用布尔开关
isPlaying = false，每次轮播函数开头先判断，避免手动切完立刻被自动逻辑覆盖 - 如果轮播期间用户手动跳转了某个 URL（比如点击导航按钮），记得重置索引，否则下次自动切会错位
真正难的不是“怎么切”，而是“切得稳”——跨域不可控、加载无反馈、用户行为打断频繁，这些细节不处理好，轮播就会在大屏上突然卡住或乱跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
