11内嵌框架

iframe 是「网页里的网页」——把另一份完整的 HTML 文档原样嵌进当前页面。视频播放器、在线地图、广告位、第三方登录组件……几乎都靠它撑场。用得好是瑞士军刀，用不好是性能与安全的黑洞。这一课把它讲清楚：用在哪、怎么用、何时该让位。

约 16 分钟 6 个动手实验 iframe / embed / object / map

一、内嵌的意义与代价

iframe 全称 inline frame（行内框架）——它在页面里挖一个矩形坑，把另一个完整的 HTML 文档塞进去。你刷的所有「嵌了 YouTube 视频」的博客、「嵌了高德地图」的店铺页，都是 iframe 在干活。

但每个 iframe 都是一个独立的浏览上下文：自己的 window、自己的 document、自己的 cookie 桶、自己的 JS 环境。与父页面几乎完全隔绝——这既是它的本钱，也是它的代价：

性能：每个 iframe 是一次额外的 HTTP 请求、独立渲染流程；默认会阻塞主页 onload。
安全：内嵌页能跑脚本、能提交表单、能跳顶层导航；不加 sandbox 等于大门敞开。
无障碍：iframe 在读屏软件里是「特殊元素」；没写 title 的 iframe 直接被跳过。

四种内嵌方式速览：iframe / embed / object / map 各管一摊
标签	嵌入对象	典型场景	现状
`<iframe>`	完整的 HTML 文档	视频、地图、广告、第三方组件	现代项目主力
`<embed>`	外部资源 / 插件	Flash、Java Applet 时代	已退役
`<object>`	外部资源（含 HTML）	PDF 嵌入、向后兼容	仅 PDF
`<map>` + `<area>`	图片局部超链	校园地图、产品导购图	小众实用

经验法则：能不用就不用，必须用就限缩 sandbox。每加一个 iframe 都该问自己三遍——能否用 div + 组件替代？能否懒加载？能否给个 sandbox？默认假设「不嵌」是最优解。

二、iframe 基础属性

iframe 的核心属性就几个：src（要嵌的 URL）、 width / height（尺寸）、 name（给链接的 target 当导航靶子）。

iframe 基础属性速查：必填 / 选填 / 谁更优先
属性	作用	必填？
src	要嵌入的 URL（同源 / 跨域皆可）	与 `srcdoc` 二选一
name	框架名，配合 `<a target>` 跳转	做导航靶子时必填
width / height	尺寸，可用 CSS 覆盖	建议给，默认 300×150
title	无障碍标签：读屏软件读这串字	强烈建议必填
srcdoc	直接把 HTML 字符串塞进去	与 `src` 二选一
referrerpolicy	是否随请求发送 Referer 头	嵌入第三方时建议填

三个 iframe 并排，分别用不同的 height——CSS 里改尺寸会覆盖 HTML 属性；同样 100% 宽，高度不同立刻看到「窗口里能塞多少内容」。

三个同源 iframe 并排看尺寸差异：把 .h-b iframe 的 height 改成 60px，中间立刻变扁

title 一定要写——它是读屏软件对 iframe 的「名字」。没写的话，盲人用户听到的就是「frame」，完全不知道里面是视频还是地图。写一句人话：<iframe title="Bilibili 视频播放器" ...>，比写十行 aria-label 都管用。

三、sandbox 安全沙箱（重点）

iframe 的核心安全机制是 sandbox：开启后，浏览器把内嵌页当「陌生人」对待—— 默认禁止脚本、禁止表单、禁止弹窗、禁止改顶层导航，由你逐项放行。

最关键的事实：不写 sandbox，iframe 内的内容照样能跑脚本、能提交表单、能跳你的父页面。除非内嵌页和父页同源，否则浏览器不会主动拦。

sandbox 值含义速查：写哪些就开哪些
sandbox 值	放行的能力	典型场景
（空字符串）	全部禁用（脚本、表单、弹窗、顶层导航都禁）	纯静态预览，最严
allow-scripts	允许运行 JavaScript	嵌入第三方 widget
allow-same-origin	视为同源（可读 cookie / localStorage）	同源内嵌业务页
allow-forms	允许提交表单	嵌入登录框、搜索
allow-popups	允许 `window.open` 弹窗	嵌入支付、分享组件
allow-popups-to-escape-sandbox	弹窗跳出沙箱（不再受限）	OAuth 第三方登录
allow-top-navigation	允许改顶层页面 URL	极少用，多数要关
allow-modals	允许 `alert / confirm / prompt`	演示性内嵌
allow-downloads	允许触发下载	文件预览场景
allow-presentation	允许进入演示全屏	嵌入 PPT / 视频
allow-orientation-lock	允许锁屏幕方向	嵌入游戏、H5

最危险的组合：sandbox="allow-scripts allow-same-origin"—— 一旦内嵌页被 XSS，它和父页面同源，等于拿到整站权限。原则是「最小权限」：要什么开什么，能不开的坚决不开；同源内容如果需要信任，直接去掉 sandbox 也比这俩一起开安全。

下面两个 iframe 并排——左边不设 sandbox（脚本可跑），右边只写 sandbox（脚本受限）。静态演示靠文字 + 红绿圆点指示安全状态。

sandbox 红绿灯对比：左红=无沙箱 / 右绿=受保护。试想：内嵌页里若有 alert('x')，哪边能弹窗？

四、loading lazy / referrerpolicy / allow

现代 iframe 多了几个性能与隐私属性——它们不改动渲染逻辑，但能减少首屏请求、降低跨站追踪。这一组常被忽视，却能让页面快上一截。

性能与隐私属性速查：什么时候该开
属性	作用	何时该开
loading="lazy"	进入视口才加载（默认 `eager`，立即加载）	页面下方的 iframe 强烈建议开，省首屏带宽
referrerpolicy="no-referrer"	请求时不带 Referer 头	嵌入第三方内容、保护隐私
allow="camera; microphone"	权限白名单（CSP 风格）	视频会议、在线工具需调用摄像头时
allowfullscreen	允许 iframe 内嵌页进入全屏	视频播放器必备
credentialless	无凭据请求（实验性）	嵌入第三方又想隔离其 cookie

最常被忽视的就是 loading="lazy"：iframe 默认 eager 一律加载，几十个嵌入位能把首屏拖垮。给视口外的 iframe 加 lazy，体验立刻不同。

lazy 骨架屏模拟：动画的灰色条就是「待加载」状态——真实页面里只有当 iframe 滚入视口，它才变成真正的内容

另一个常被忽略：referrerpolicy="no-referrer"。嵌第三方内容（统计、广告）时关掉 Referer 头，能减少对方「反查你是从哪个页面来的」。对用户隐私、对自家 SEO 关键词泄露都是一道屏障。

五、srcdoc：内联 HTML 文档

srcdoc 让 iframe 直接吃一段HTML 字符串，而不需要单独准备一份 HTML 文件。常用于三类场景：

Markdown / 富文本实时预览：编辑器把渲染结果塞进 srcdoc，所见即所得。
沙箱演示：把代码段包进 srcdoc，不用造一堆预览 HTML 文件。
A/B 测试卡片：根据用户身份动态生成不同 srcdoc 内容。

与 src 的核心差异：srcdoc 走同源伪协议（about:srcdoc），不发网络请求；src 则照常发 HTTP 请求拉取。这决定了它的速度与隔离性都更可控。

srcdoc 实时预览：下面 iframe 里那段「今天也要加油鸭」就是 srcdoc 直接渲染——改 srcdoc 内文字，iframe 跟着变

六、embed 与 object：插件时代的遗产

Flash、Java Applet 当年都靠 <embed> / <object> 塞进页面。如今插件时代结束，iframe 几乎一统天下—— 只剩 PDF 嵌入还在用 <object>，且大多也是为了触发浏览器自带的 PDF 阅读器。

三选一对比卡：左边 iframe 真有内容、中间 embed 没资源所以空白、右边 object 缺 PDF 也空白——看出「首选 iframe」的道理

实战原则：99% 场景用 iframe。 embed / object 唯一还在用的场景是嵌入 PDF （或个别浏览器插件）。把 PDF 当 HTML 嵌也可以，但浏览器自带 PDF 阅读器通常要靠 object 触发—— 两者不冲突，按需选择。

七、map + area：图像热点地图

想让一张图片的不同区域跳不同链接？用 <img usemap="#名"> 配合 <map name="名"><area shape=… coords=… href=…></map>，这套组合叫客户端图像映射（client-side image map）。无需 JS，点击图片不同区域就能跳不同地址。

area 形状与坐标规则：rect / circle / poly / default
shape	coords 含义	示例	适用
`rect`	左上 x,y + 右下 x,y（共 4 个数）	coords="40,40,180,130"	矩形区域（教室、房间）
`circle`	圆心 x,y + 半径 r（共 3 个数）	coords="340,120,60"	圆形区域（操场、按钮）
`poly`	多边形顶点 x,y 顺时针串起来（≥ 6 个数）	coords="200,160,420,160,380,220,240,220"	不规则区域（地图、轮廓）
`default`	覆盖整张图剩余部分	coords="0,0,460,240"	「图片其余区域」兜底

下面这张「校园平面图」——三个区域分别跳转不同锚点，鼠标点击后下方信息卡会用 :target 高亮。图片用内联 SVG 占位，无需外部资源。

校园平面图图像热点：点矩形「教室」/ 圆形「操场」/ 多边形「图书馆」——下方信息卡跟随 :target 高亮（纯 CSS，无需 JS）

三个小坑：① coords 是按图片原始像素算的， CSS 缩放图片不影响坐标（浏览器自动换算）。② area 没有视觉反馈，想「hover 高亮」得靠 JS 或叠一层透明 div + 焦点环——本课用 :target 高亮信息卡是一种纯 CSS 解法。 ③ alt 必须写，否则读屏在热区上直接哑火。

八、本章小结

iframe = 网页里的网页：独立文档上下文，可嵌视频、地图、广告、第三方组件；代价是性能、安全、无障碍。
基础属性：src / name / width / height / title（必填） / srcdoc。
sandbox 是安全命门：不写 = 默认允许脚本。原则「最小权限」，要什么开什么；allow-scripts + allow-same-origin 一起开是雷区。
性能属性：loading="lazy"（视口外不加载，省首屏）、referrerpolicy（关 Referer 防追踪）、allow（权限白名单）。
srcdoc 直塞 HTML 字符串，零网络请求；常用于实时预览与沙箱演示。
现代项目首选 <iframe>；<embed> 已退役；<object> 仅留 PDF 嵌入。
<map> + <area> 实现图片局部链接：rect / circle / poly 三种形状各有 coords 写法。

动手练习：做一张「学校 / 商场平面图」—— 用内联 SVG 画示意图，叠 <map> + 三个 <area>，配 :target 高亮信息卡。再嵌入一个 sandbox="allow-scripts" 的 YouTube / B 站视频占位 iframe，加一个 srcdoc 实时预览一张自我介绍卡。完成后给所有 iframe 写 title，给页面下方的 iframe 加 loading="lazy"。