框架 `<iframe>`
02-html2026/11/14
<iframe>（内联框架）用于在网页中嵌入另一个网页。
基本语法
最简单的使用
<iframe src="https://example.com"></iframe>
带尺寸和边框
<iframe
src="embedded-page.html"
width="800"
height="600"
frameborder="0">
</iframe>
核心属性详解
1. src - 嵌入页面地址
<!-- 外部网站 -->
<iframe src="https://www.wikipedia.org"></iframe>
<!-- 相对路径 -->
<iframe src="local-page.html"></iframe>
<!-- 绝对路径 -->
<iframe src="/pages/embedded.html"></iframe>
<!-- 空框架 -->
<iframe src="about:blank"></iframe>
2. width 和 height - 尺寸控制
<!-- 固定像素 -->
<iframe src="content.html" width="300" height="200"></iframe>
<!-- 百分比 -->
<iframe src="content.html" width="100%" height="500"></iframe>
<!-- 通过 CSS 控制 -->
<iframe src="content.html" style="width: 100%; height: 400px;"></iframe>
3. name - 框架名称
<!-- 命名框架 -->
<iframe src="default.html" name="contentFrame"></iframe>
<!-- 链接目标指向该框架 -->
<a href="page1.html" target="contentFrame">在框架中打开</a>
<a href="page2.html" target="contentFrame">另一个页面</a>
4. srcdoc - 内联 HTML 内容
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head><title>内嵌内容</title></head>
<body>
<h1>Hello World!</h1>
<p>这是直接嵌入的HTML内容</p>
</body>
</html>
"></iframe>
5. sandbox - 安全沙箱
<!-- 最严格的沙箱 -->
<iframe src="untrusted.html" sandbox></iframe>
<!-- 允许特定功能 -->
<iframe src="content.html" sandbox="allow-scripts allow-forms"></iframe>
<!-- 常用沙箱配置 -->
<iframe src="content.html" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
沙箱属性值：
- allow-forms - 允许表单提交
- allow-scripts - 允许执行脚本
- allow-same-origin - 允许同源访问
- allow-popups - 允许弹出窗口
- allow-top-navigation - 允许导航顶级页面
6. allow - 功能策略
<!-- 允许全屏 -->
<iframe src="video.html" allow="fullscreen"></iframe>
<!-- 允许支付请求 -->
<iframe src="payment.html" allow="payment"></iframe>
<!-- 多个权限 -->
<iframe src="app.html" allow="camera; microphone; geolocation"></iframe>
7. loading - 加载行为
<!-- 延迟加载 -->
<iframe src="heavy-content.html" loading="lazy"></iframe>
<!-- 立即加载 -->
<iframe src="important-content.html" loading="eager"></iframe>