持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 17 天，点击查看活动详情
iframe 标签允许我们将来自其他来源（其他网站）的内容嵌入到我们的网页中。
从技术上讲，iframe 创建了一个新的嵌套浏览上下文。这意味着 iframe 中的任何内容都不会干扰父页面，反之亦然。JavaScript 和 CSS 不会泄漏到 iframe 或从 iframe 中泄漏。
许多网站使用 iframe 执行各种操作。您可能熟悉 CodePen、Glitch、CodeSandbox 或其他允许您在页面的某个部分编码的网站，并在一个框中看到结果。那个框便是 iframe。
您可以这样创建：
<iframe src="page.html" />
您也可以加载绝对 URL：
<iframe src="https://example.com/page.html" />
您可以设置一组 width 和 height 参数（或使用 CSS 设置），否则 iframe 将使用默认值，即 300 x 150 像素的框：
<iframe src="page.html" width="800" height="400" />
Srcdoc
srcdoc 属性允许您指定一些要显示的内联 HTML。它是 src 的替代品，但完全不支持 IE 浏览器：
<iframe srcdoc="<p>Hello iframe!</p>" />
Sandbox
sandbox 属性允许我们限制 iframe 中允许的操作。
如果我们省略它，一切都是允许的：
<iframe src="page.html" />
如果我们将其设置为 ''（空），则不允许：
<iframe src="page.html" sandbox="" />
我们可以通过在 sandbox 属性中添加选项来选择允许的内容。您可以通过在中间添加空格来允许多个。以下是您可以使用的选项的不完整列表：
allow-forms允许提交表单allow-modals允许打开模态窗口，包括在 JavaScript 调用alert()allow-orientation-lock允许锁定屏幕方向allow-popups允许弹出窗口、使用window.open()和target="_blank"链接allow-same-origin将正在加载的资源视为同一来源allow-scripts让加载的iframe运行脚本（但不创建弹出窗口）。allow-top-navigation允许访问iframe以访问顶级浏览上下文
Allow
目前只是实验性的，并且只支持基于 Chromium 的浏览器，这是父窗口和 iframe 之间资源共享的未来。
它类似于 sandbox 属性，但允许我们使用特定的功能，包括：
accelerometer提供对 Sensors API Accelerometer 接口的访问权限ambient-light-sensor提供对 Sensors API AmbientLightSensor 接口的访问权限autoplay允许自动播放视频和音频文件camera允许从 getUserMedia API 访问相机display-capture允许使用 getDisplayMedia API 访问屏幕内容fullscreen允许访问全屏模式geolocation允许访问 Geolocation APIgyroscope提供对 Sensors API Gyroscope 接口的访问权限magnetometer提供对 Sensors API Magnetometer 接口的访问权限microphone使用 getUserMedia API 访问设备麦克风midi允许访问 Web MIDI APIpayment提供对 Payment Request API 的访问权限speaker允许通过设备扬声器播放音频usb提供对 WebUSB API 的访问权限vibrate提供对 Vibration API 的访问权限vr提供对 WebVR API 的访问权限
这些都是实验性，完整内容查看 👉 特征策略。
Referrer
加载 iframe 时，浏览器会在 Referer 标题中向其发送有关谁正在加载它的重要信息（请注意单个 r，我们必须忍受的拼写错误）。
wiki：Referer 的正确英语拼法是 referrer。这是早期 HTTP 规范当中存在的拼写错误，后来为保持向下兼容将错就错。
referrerpolicy 属性允许我们设置在加载时发送到 iframe 的 referrer。referrer 是一个 HTTP 头，让页面知道谁在加载它。以下是允许的值：
no-referrer不发送 referrer 标头no-referrer-when-downgrade是默认值，即当前页面通过 HTTPS 加载，并且iframe在 HTTP 协议上加载时发送 referrer 来源网址origin发送 referrer 来源网址，仅包含来源（端口、协议和域），而不包含默认来源和路径origin-when-cross-origin当从iframe中的同源（端口、协议、域）加载时，referrer 以其完整形式（来源 + 路径）发送。否则只发送原点same-origin仅当从iframe中的同源（端口、协议、域）加载时，才会发送 referrer 来源网址strict-origin如果当前页面通过 HTTPS 加载，并且iframe也通过 HTTPS 协议加载，那么发送源作为 referrer。如果iframe通过 HTTP 加载，则不发送任何内容strict-origin-when-cross-origin在同源上工作时，将来源和路径作为 referrer 发送。如果当前页面通过 HTTPS 加载，并且iframe也通过 HTTPS 协议加载，那么发送源作为 referrer。如果iframe通过 HTTP 加载，则不发送任何内容unsafe-url即使从 HTTP 加载资源，并且当前页面是通过 HTTPS 加载的，也会将源和路径作为 referrer 发送
更多资料
本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。
