HTML: HTML iframe
<iframe>（内联框架）功能允许您在当前页面内嵌入另一个HTML页面。无论是嵌入视频、地图还是其他网页，内联框架在网页开发中都是不可或缺的工具。
1. iframe 基础
使用 <iframe src="URL"></iframe> 就可以将另一个网页嵌入到当前页面中。width 和 height 属性控制显示尺寸：
▶ 示例
HTML
<!-- 嵌入一个简单的页面，宽度600px，高度400px -->
<iframe src="https://example.com" width="600" height="400">
您的浏览器不支持 iframe。
</iframe>
2. iframe 属性详解
iframe 提供了多个属性来控制嵌入行为：
src— 嵌入页面的 URL 地址width/height— 设置 iframe 的像素尺寸title— 为 iframe 提供描述，对屏幕阅读器非常重要name— 为 iframe 命名，可作为链接（<a>）的target目标name属性配合target可以让链接在 iframe 中打开：
▶ 示例
HTML
<!-- 命名 iframe -->
<iframe src="about:blank" name="content-frame"
width="100%" height="300"></iframe>
<!-- 链接通过 target 在 iframe 中打开 -->
<a href="https://www.wikipedia.org" target="content-frame">
在 iframe 中打开 Wikipedia
</a>
<a href="https://www.example.com" target="content-frame">
在 iframe 中打开 Example
</a>
💡 无障碍优先：
title 属性对 iframe 来说不是可选项——屏幕阅读器会朗读它，帮助视障用户理解嵌入内容。即使不显示在页面上，也请务必为每个 iframe 添加有意义的 title。
3. iframe 安全 — sandbox 属性
sandbox 属性对 iframe 中的内容施加额外的限制，是提升安全性的重要手段。它可以限制表单提交、弹窗、脚本执行等行为：
sandbox=""（空值）— 启用所有限制，最严格sandbox="allow-scripts"— 允许执行脚本，但禁止其他行为sandbox="allow-scripts allow-forms"— 允许脚本和表单提交
HTML
<!-- 最严格的沙箱：禁止一切高级功能 -->
<iframe src="https://example.com" sandbox=""></iframe>
<!-- 允许脚本，但禁止表单提交和弹窗 -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>
<!-- 允许脚本和表单，但仍然禁止弹窗、导航等 -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"></iframe>
4. 嵌入第三方内容
实际开发中最常见的 iframe 用法是嵌入第三方服务的内容，如 YouTube 视频和 Google 地图：
▶ 示例
HTML
<!-- 嵌入 YouTube 视频 -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube 视频播放器"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<!-- 嵌入 Google 地图 -->
<iframe width="600" height="450"
src="https://www.google.com/maps/embed?pb=..."
title="Google 地图"
allowfullscreen
loading="lazy"></iframe>
嵌入第三方内容时，平台通常会在分享/嵌入选项中直接提供 iframe 代码，你只需要复制粘贴即可。注意带上 title 属性和 loading="lazy" 以优化加载性能。
5. iframe 与父页面通信简介
当 iframe 和父页面同源（相同协议、域名、端口）时，可以通过 JavaScript 直接访问对方的 DOM。对于跨域场景，HTML5 提供了 postMessage API 实现安全通信：
HTML
<!-- 父页面发送消息 -->
<iframe src="https://other-domain.com/page"
id="myFrame" title="跨域页面"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('你好, iframe!', 'https://other-domain.com');
</script>
<!-- iframe 内部接收消息（需要在被嵌入的页面中） -->
<script>
window.addEventListener('message', function(event) {
// 务必验证来源！
if (event.origin !== 'https://parent-domain.com') return;
console.log('收到:', event.data);
});
</script>
🔒 安全提示：
使用 postMessage 时永远不要信任 event.origin 之外的信息。始终验证消息来源，避免将敏感数据发送给不受信任的域名。
❓ 常见问题
Q iframe有什么安全风险？
A iframe的主要风险：1）点击劫持——攻击者将你的页面嵌入恶意网站，诱导用户点击；2）跨站脚本——嵌入的内容可能执行恶意JavaScript；3）数据泄露——恶意iframe可能窃取用户信息。防护措施：使用
sandbox属性限制功能，用allow属性精确控制权限，用X-Frame-Options头防止被嵌入。Q 为什么iframe会影响SEO？
A 搜索引擎对iframe内的内容索引能力有限：1）iframe内的文字、链接、图片可能不会被计入主页面的SEO；2）iframe会增加页面加载时间，影响Core Web Vitals评分；3）移动端体验可能不佳。建议：重要内容直接放在主页面，不要放在iframe中；只用iframe嵌入视频、地图等第三方内容。
Q
sandbox属性有什么用？A
sandbox为iframe创建一个"沙箱"，默认禁止所有危险操作（脚本、表单、弹窗等）。可以逐步放开权限：sandbox="allow-scripts"允许JavaScript，sandbox="allow-forms"允许表单提交，sandbox="allow-same-origin"允许访问Cookie。多个权限用空格分隔。建议：始终使用sandbox，只放开必要的权限。Q iframe和
<embed>/<object>有什么区别？A
<iframe>专门用于嵌入HTML页面，功能最全（支持sandbox、postMessage等）；<embed>和<object>用于嵌入非HTML内容（如PDF、Flash、SVG）。HTML5中，<embed>是空标签，<object>可以包含备用内容（<param>和fallback）。建议：嵌入网页用<iframe>，嵌入PDF用<embed>或<object>。📖 小节
<iframe>在当前页面中嵌入另一个 HTML 页面src指定嵌入地址，width/height控制尺寸title提供无障碍描述，name可配合target属性使用sandbox限制 iframe 中的功能，提升安全性- YouTube、Google 地图等第三方内容常用 iframe 嵌入
postMessage实现跨域父子页面通信
📝 作业
- 嵌入你的第一个视频：找一个 YouTube 视频，复制它的嵌入代码放到你的 HTML 文件中。确保添加
title属性和loading="lazy"。 - 沙箱实验：创建一个 iframe，先用
sandbox=""最严格模式，然后逐步放开allow-scripts和allow-forms，观察行为变化。
