iframe本身不支持幻灯片播放，仅是嵌入独立文档的容器；所谓“iframe幻灯片”实为通过JS切换其src实现单页轮播，需同源、注意跨域限制，并推荐用postMessage通信，但存在SEO差、移动端体验断裂、性能开销大等问题。
iframe 本身不支持幻灯片播放，别被名字误导
iframe 只是嵌入一个独立文档的容器，它没有内置的“切换”“自动播放”“分页”逻辑。所谓“用 iframe 实现幻灯片”，实际是把多个页面（或同一页面的不同状态）按需载入 iframe，再配合外部 JS 控制其 src 切换 —— 本质是“单页轮播”，不是 iframe 自带功能。
手动切换 iframe src 是最直接的做法
适合内容完全独立、无需交互同步的场景，比如每页都是静态 HTML 幻灯片（slide1.html、slide2.html）：
<iframe id="slide-frame" src="slide1.html" width="800" height="600"></iframe>
<button onclick="loadSlide('slide2.html')">下一页</button>
关键点：
- 每次调用
document.getElementById('slide-frame').src = newUrl会触发重新加载，有白屏和延迟 - 浏览器可能对跨域
src报DOMException: Blocked a frame with origin ...，必须同源 - 如果目标页含
history.pushState或监听hashchange，切换后状态不会保留，得在目标页内自行处理
用 postMessage 实现父子页通信（推荐进阶用法）
当幻灯片内容需要和主页面联动（比如主页面控制进度、子页上报当前页码），必须用 postMessage：
立即学习“前端免费学习笔记（深入）”；
主页面发消息：
const iframe = document.getElementById('slide-frame');
iframe.contentWindow.postMessage({ type: 'GO_TO_SLIDE', index: 2 }, 'https://your-domain.com');
子页（slide.html）监听：
window.addEventListener('message', e => {
if (e.origin !== 'https://your-domain.com') return;
if (e.data.type === 'GO_TO_SLIDE') {
showSlide(e.data.index); // 子页内部切换逻辑
}
});
注意：
-
postMessage第二个参数不能写*，否则子页无法响应（现代浏览器限制） - 子页必须主动监听，否则消息直接丢弃；主页面发完不报错也不代表子页收到了
- 如果子页是第三方服务（如 Google Slides 嵌入），它通常不监听
postMessage，这条路走不通
为什么不该用 iframe 做复杂幻灯片
真正的问题不在“能不能做”，而在“值不值得”：
- SEO 友好性差：搜索引擎很难索引
iframe内容，且多页轮播会让爬虫认为是重复内容 - 移动端体验断裂：
iframe默认不继承父页的 viewport 设置，缩放/滚动常出问题 - 性能开销大：每次切页都重载资源（JS/CSS/图片），比单页 DOM 操作慢 3–5 倍
- 调试困难：Chrome DevTools 的 Elements 面板里，
iframe内容要单独打开新标签才能 inspect
除非你明确需要隔离执行环境（比如嵌入不受信的第三方演示页），否则优先用 div + CSS 动画 + JS 状态管理更可控。iframe 不是幻灯片组件，它只是个沙盒窗口。
