HTML iframe

引入

<iframe> 用于在当前网页中嵌入另一个网页。

它常用于嵌入地图、视频、在线文档、第三方页面等内容。

正文

定义

定义

<iframe> 是内联框架标签，可以在一个 HTML 页面中加载并显示另一个 HTML 页面。

可以把它理解为：在当前页面中开了一个“小窗口”，这个小窗口里显示另一个网页。

语法

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

其中：

• src 用于指定嵌入页面的地址
• width 用于设置宽度
• height 用于设置高度

嵌入网页

<iframe src="page.html" width="500" height="300"></iframe>

这里会在当前页面中嵌入 page.html。

如果 src 路径写错，嵌入内容就无法正常显示。

嵌入地图或视频

很多第三方网站会提供 iframe 嵌入代码。

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="示例嵌入页面">
</iframe>

实际使用第三方服务时，通常直接复制它提供的嵌入代码，再根据需要调整大小。

title 属性

title 用于描述 iframe 中嵌入的内容。

<iframe src="map.html" title="公司地址地图"></iframe>

title 对屏幕阅读器等辅助工具很重要，可以告诉用户这个嵌入区域是什么。

name 属性

name 可以给 iframe 设置名称，让链接在指定 iframe 中打开。

<a href="page.html" target="contentFrame">打开页面</a>
 
<iframe name="contentFrame" width="600" height="400"></iframe>

点击链接后，page.html 会显示在 name="contentFrame" 的 iframe 中。

loading 属性

loading="lazy" 可以让 iframe 延迟加载。

<iframe src="video.html" loading="lazy" title="视频内容"></iframe>

页面滚动到附近时再加载，可以减少页面一开始的加载压力。

sandbox 属性

sandbox 用于限制 iframe 中页面的能力，提高安全性。

<iframe src="page.html" sandbox title="受限制页面"></iframe>

加上 sandbox 后，iframe 中的页面会受到更多限制。

也可以按需要开放某些能力。

<iframe src="page.html" sandbox="allow-scripts" title="允许脚本页面"></iframe>

这类安全设置比较细，初学时先知道：嵌入不可信页面时，要注意安全限制。

特点

• <iframe> 可以在当前页面中嵌入另一个网页
• src 指定嵌入页面的地址
• width 和 height 控制显示大小
• title 用于说明 iframe 内容，对无障碍有帮助
• loading="lazy" 可以延迟加载 iframe
• sandbox 可以限制 iframe 中页面的权限

注意事项

• 不要随便嵌入不可信网页，可能带来安全风险
• 有些网站禁止被 iframe 嵌入，页面可能无法显示
• iframe 内容加载较慢时，会影响页面体验
• 建议给 iframe 添加 title，方便辅助工具识别
• 第三方 iframe 可能包含广告、脚本或跟踪代码，需要谨慎使用
• iframe 不是普通布局容器，不要用它代替页面布局

理解

可以把 <iframe> 理解为网页中的“嵌入窗口”。

它不是把另一个网页的 HTML 直接复制进来，而是在当前页面中单独打开一个区域来显示另一个页面。

因为它加载的是外部页面，所以需要特别注意性能、安全和可访问性。

引出

理解 <iframe> 之后，可以继续学习 HTML 可访问性 和浏览器安全相关知识。