HTML 中的 iframe

学习目标

理解 <iframe> 的作用与核心用途
掌握 <iframe> 的基本语法和常用属性
能够在网页中嵌入外部内容（如视频、地图、工具等）
了解安全、性能与可访问性方面的最佳实践

什么是 `<iframe>`

<iframe>（Inline Frame，内联框架）是 HTML 中用于在当前网页中嵌入另一个网页或文档的元素。它就像一个“窗口”，透过它可以加载并显示来自其他来源的内容，而无需离开当前页面。

应用场景	示例
嵌入视频	哔哩哔哩、优酷视频
集成地图	百度地图、高德地图
加载表单 / 小工具	第三方评论系统、支付表单、天气插件
文档预览	PDF、HTML 页面片段
多源内容整合	在同一页面展示多个独立功能模块

基本语法

<iframe src="URL" title="描述性标题"></iframe>

src：必需属性，指定要嵌入的网页或资源的 URL。
title：强烈建议添加，用于提升可访问性（屏幕阅读器会读出此标题）。

最佳实践：始终为 <iframe> 提供有意义的 title 属性，以符合 WCAG 可访问性标准。

常用属性

属性	说明	示例
`src`	嵌入内容的 URL	`src="https://example.com"`
`width` / `height`	设置 iframe 尺寸（默认单位为像素）	`width="500" height="300"`
`style="border: none"`	移除默认边框（常用）	`<iframe style="border: none">`
`name`	为 iframe 命名，可用于链接跳转目标	`name="content-frame"`
`sandbox`	限制 iframe 内容的权限（如禁止脚本、弹窗等）	`sandbox="allow-scripts allow-same-origin"`
`loading="lazy"`	懒加载，提升页面性能	`loading="lazy"`
`allowfullscreen`	允许全屏模式（常用于视频）	`allowfullscreen`
`srcdoc`	直接嵌入 HTML 片段（替代 `src`）	`srcdoc="<h1>Hello</h1>"`

实用示例

基础嵌入

移除边框 + 设置尺寸

<iframe 
  src="https://www.bilibili.com"
  width="400" 
  height="370"
  style="border: none;"
  title="哔哩哔哩">
</iframe>

带样式的边框

<iframe 
  src="https://example.com/tool.html"
  width="400" 
  height="400"
  style="border: 4px solid orange; border-radius: 8px;"
  title="在线转换工具">
</iframe>

通过链接控制

<iframe 
  src="default.html" 
  name="main-content" 
  width="500" 
  height="400"
  title="动态内容区域">
</iframe>

<p>
  <a href="page1.html" target="main-content">页面 1</a> |
  <a href="page2.html" target="main-content">页面 2</a>
</p>

用户点击链接后，新内容将在 iframe 中加载，主页面保持不变。

总结要点

<iframe> 是嵌入外部网页 / 内容的强大工具。
必须设置 src 和 title，推荐使用 style="border: none" 美化外观。
利用 name + target 可实现链接控制 iframe 内容。
安全第一：对第三方内容使用 sandbox。
性能与体验：合理使用懒加载，避免过度嵌套。

思考与练习

尝试在你的网页中嵌入一个 YouTube 视频，并设置为无边框、宽 560px、高 315px，支持全屏。
创建一个包含两个链接的页面，点击链接可在下方 iframe 中分别加载 jsonPrac3.html 和 uni2.html。
为什么在公共网站中嵌入未加 sandbox 的第三方 iframe 可能带来安全风险？请举例说明。

源本科技 | 码上会

学习目标

什么是 <iframe>

基本语法

常用属性

实用示例

基础嵌入

带样式的边框

通过链接控制

总结要点

思考与练习

什么是 `<iframe>`