79. iframe 内联框架

本节目标：学会用 iframe 在页面中嵌入其他网页，掌握 sandbox 等安全属性的用法。

<iframe> 是”内联框架”的缩写。它让你在当前的页面里开一个”窗口”，显示另一个网页的内容。嵌入地图、视频、广告位，都常用它。

基本用法

<iframe src="https://example.com" width="600" height="400"></iframe>

src 指定要嵌入的页面地址，width 和 height 设置尺寸。

Tip
标签之间可以放一段提示文字，当浏览器不支持 iframe 时显示：
<iframe src="https://example.com">
  你的浏览器不支持 iframe。
</iframe>

常用属性

属性	作用
`src`	嵌入页面的 URL
`width`	宽度
`height`	高度
`name`	框架名称，配合 target 使用
`sandbox`	安全限制
`loading`	懒加载策略
`srcdoc`	直接写 HTML 内容

sandbox 安全属性

sandbox 是 iframe 最重要的安全机制。加上它之后，嵌入的页面会被严格限制。

<iframe src="https://example.com" sandbox></iframe>

空的 sandbox 会启用所有限制：不能提交表单、不能执行脚本、不能打开新窗口等。

你可以按需放开某些权限：

值	允许的行为
`allow-forms`	允许提交表单
`allow-scripts`	允许执行 JavaScript
`allow-same-origin`	允许同源请求
`allow-top-navigation`	允许修改父页面地址
`allow-popups`	允许弹窗

<iframe src="https://example.com" sandbox="allow-scripts allow-forms"></iframe>

Note

嵌入第三方页面时，强烈建议加上 sandbox。这是防止恶意脚本攻击父页面的第一道防线。

loading 懒加载

HTML5 给 iframe 增加了 loading 属性，支持原生懒加载。

<iframe src="https://example.com" loading="lazy"></iframe>

loading="lazy" 表示滚动到可见区域时才加载，减少初始页面加载时间。

srcdoc 直接写内容

srcdoc 允许你直接在标签里写 HTML，不用请求外部资源。

<iframe srcdoc="<h1>Hello</h1><p>这是内联内容</p>"></iframe>

srcdoc 的优先级高于 src。如果两个属性同时存在，浏览器会用 srcdoc。

配合 target 使用

iframe 的 name 属性可以和链接的 target 配合，实现”点击链接，内容在 iframe 里显示”。

<iframe name="myFrame" src="page1.html" width="600" height="400"></iframe>

<a href="page2.html" target="myFrame">加载页面2</a>
<a href="page3.html" target="myFrame">加载页面3</a>

点击链接后，页面会在 iframe 里切换，而不是整个页面跳转。

安全注意事项

嵌入 iframe 有几个需要注意的地方：

只嵌入信任的内容。恶意页面可能通过脚本攻击父页面。
使用 sandbox。即使信任的内容，sandbox 也能防止意外。
避免嵌入登录页。钓鱼网站常用 iframe 伪装成正规登录页面。

Note

很多网站会设置 X-Frame-Options 响应头，禁止被 iframe 嵌入。这是防止”点击劫持”攻击的手段。

小结

<iframe> 在页面中嵌入其他网页
sandbox 属性限制嵌入页面的权限
loading="lazy" 实现懒加载
srcdoc 可以直接写 HTML 内容
配合 name + target 实现标签页切换效果