The iframe tag allows us to embed content coming from other origins (other sites) into our web page.

iframe标签允许我们将来自其他来源(其他网站)的内容嵌入到我们的网页中。

Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not interfere with the parent page, and vice versa. JavaScript and CSS do not “leak” to/from iframes.

从技术上讲，iframe会创建一个新的嵌套浏览上下文。 这意味着iframe中的任何内容都不会干扰父页面，反之亦然。 JavaScript和CSS不会从iframe中“泄漏”。

Many sites use iframes to perform various things. You might be familiar with Codepen, Glitch or other sites that allow you to code in one part of the page, and you see the result in a box. That’s an iframe.

许多网站都使用iframe执行各种操作。 您可能熟悉Codepen，Glitch或其他允许您在页面的一部分中进行编码的站点，并且在框中看到了结果。 那是一个iframe。

You create one this way:

您可以这样创建一个：

<iframe src="page.html"></iframe>

You can load an absolute URL, too:

您也可以加载绝对URL：

<iframe src="https://site.com/page.html"></iframe>

You can set a set of width and height parameters (or set them using CSS) otherwise the iframe will use the defaults, a 300x150 pixels box:

您可以设置一组宽度和高度参数(或使用CSS进行设置)，否则iframe将使用默认的300x150像素框：

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc (Srcdoc)

The srcdoc attribute lets you specify some inline HTML to show. It’s an alternative to src, but recent and not supported in Edge 18 and lower, and in IE:

srcdoc属性使您可以指定一些要显示的内联HTML。 它是src的替代方法，但是是最新的，并且在Edge 18和更低版本以及IE中不受支持：

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

沙盒 (Sandbox)

The sandbox attribute allows us to limit the operations allowed in the iframes.

sandbox属性可让我们限制iframe中允许的操作。

If we omit it, everything is allowed:

如果我们忽略它，则一切都被允许：

<iframe src="page.html"></iframe>

If we set it to “”, nothing is allowed:

如果将其设置为“”，则不允许任何操作：

<iframe src="page.html" sandbox=""></iframe>

We can select what to allow by adding options in the sandbox attribute. You can allow multiple ones by adding a space in between. Here’s an incomplete list of the options you can use:

我们可以通过在sandbox属性中添加选项来选择允许的内容。 您可以通过在两者之间添加一个空格来允许多个。 这是您可以使用的选项的不完整列表：

• allow-forms: allow to submit forms

  allow-forms ：允许提交表单

• allow-modals allow to open modals windows, including calling alert() in JavaScript

  allow-modals允许打开模式窗口，包括在JavaScript中调用alert()

• allow-orientation-lock allow to lock the screen orientation

  allow-orientation-lock允许锁定屏幕方向

• allow-popups allow popups, using window.open() and target="_blank" links

  allow-popups使用window.open()和target="_blank"链接允许弹出窗口

• allow-same-origin treat the resource being loaded as same origin

  allow-same-origin将加载的资源视为相同的来源

• allow-scripts lets the loaded iframe run scripts (but not create popups).

  allow-scripts允许加载的iframe运行脚本(但不创建弹出窗口)。

• allow-top-navigation gives access to the iframe to the top level browsing context

  allow-top-navigation允许访问iframe到*浏览上下文

允许 (Allow)

Currently experimental and only supported by Chromium-based browsers, this is the future of resource sharing between the parent window and the iframe.

目前尚处于试验阶段，仅受基于Chromium的浏览器支持，这是父窗口与iframe之间资源共享的未来。

It’s similar to the sandbox attribute, but lets us allow specific features, including:

它类似于sandbox属性，但是让我们允许特定的功能，包括：

• accelerometer gives access to the Sensors API Accelerometer interface

  accelerometer可访问Sensors API加速度计界面

• ambient-light-sensor gives access to the Sensors API AmbientLightSensor interface

  ambient-light-sensor可访问Sensors API AmbientLightSensor接口

• autoplay allows to autoplay video and audio files

  autoplay允许自动播放视频和音频文件

• camera allows to access the camera from the getUserMedia API

  camera允许从getUserMedia API访问相机

• display-capture allows to access the screen content using the getDisplayMedia API

  display-capture允许使用getDisplayMedia API访问屏幕内容

• fullscreen allows to access fullscreen mode

  fullscreen允许进入全屏模式

• geolocation allows to access the Geolocation API

  geolocation允许访问Geolocation API

• gyroscope gives access to the Sensors API Gyroscope interface

  gyroscope可访问Sensors API陀螺仪界面

• magnetometer gives access to the Sensors API Magnetometer interface

  magnetometer可访问Sensors API磁力计界面

• microphone gives access to the device microphone using the getUserMedia API

  microphone允许使用getUserMedia API访问设备麦克风

• midi allows access to the Web MIDI API

  midi允许访问Web MIDI API

• payment gives access to the Payment Request API

  payment可访问付款请求API

• speaker allows access to playing audio through the device speakers

  speaker允许通过设备扬声器播放音频

• usb gives access to the WebUSB API.

  usb允许访问WebUSB API。

• vibrate gives access to the Vibration API

  vibrate允许访问振动API

• vr gives access to the WebVR API

  vr允许访问WebVR API

特性策略的书写规则是：<feature name> <allowlist of origin(s)>

完整的特性名称参考： Policy Controlled Features或者Feature-Policy

而allowlist则有如下规则：

*：表示该特性在该文档下都是允许的，包括所有的嵌套的浏览内容(iframes),而不用管这些内容的源。
self：表示该特性在该文档下都是允许的，并且仅在同源的情况下嵌套的浏览内容(iframes)才可以使用。
src：(iframes的allow属性专用)表示该特性在这个iframe下允许使用，只要加载的文档来源的源和iframe的src属性指定的URL是同源的。
none：表示该特性在顶层以及嵌套的浏览内容下都是被禁用的
<origin(s)>：表示该特性只在一些指定的源下才允许使用，多个源使用空格隔开
今天我们主要讲一下iframe下的allow属性，比如你不允许iframe的页面全屏、不允许调用摄像头之类的行为，可以这么配置：

<iframe allow="camera 'none'; fullscreen 'none'">

比如只允许同源的才可以使用全屏这个特性：

<iframe src="https://example.com..." allow="fullscreen 'src'"></iframe>

比如只允许指定源才可以使用定位功能：

<iframe src="https://google-developers.appspot.com/demos/..." allow="geolocation https://google-developers.appspot.com"></iframe>

allow的值有：

• Accelerometer
• Ambient light sensor
• Autoplay
• Camera
• Encrypted media
• Fullscreen
• Geolocation
• Gyroscope
• Lazyload
• Microphone
• Midi
• PaymentRequest
• Picture-in-picture
• Speaker
• USB
• VR / XR

推荐人 (Referrer)

When loading an iframe, the browser sends it important information about who is loading it in the Referer header (notice the single r, a typo we must live with).

加载iframe时，浏览器会在Referer标头中向其发送有关谁正在加载iframe的重要信息(请注意，我们必须忍受单个r ，即错字)。

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

引荐来源网址的拼写错误源自计算机科学家Phillip Hallam-Baker最初提出的将字段合并到HTTP规范中的提议。 在将拼写错误合并到“请求注释”标准文档RFC 1945中时，就已经将拼写错误固定下来。

The referrerpolicy attribute lets us set the referrer to send to the iframe when loading it. The referrer is an HTTP header that lets the page know who is loading it. These are the allowed values:

referrerpolicy属性可让我们将引荐来源网址设置为在加载时发送到iframe。 引荐来源网址是HTTP标头，可让页面知道谁在加载它。 这些是允许的值：

• no-referrer-when-downgrade it’s the default, and sends the referrer when the current page is loaded over HTTPS and the iframe loads on the HTTP protocol

  no-referrer-when-downgrade是默认值，当通过HTTPS加载当前页面并且通过HTTP协议加载iframe时，将发送引荐来源网址

• no-referrer does not send the referrer header

  no-referrer不发送引荐来源标头

• origin the referrer is sent, and only contains the origin (port, protocol, domain), not the origin + path which is the default

  origin引荐来源网址已发送，并且仅包含来源(端口，协议，域)，而不包含来源+路径(默认设置)

• origin-when-cross-origin when loading from the same origin (port, protocol, domain) in the iframe, the referrer is sent in its complete form (origin + path). Otherwise only the origin is sent

  从iframe中从相同起点(端口，协议，域)加载origin-when-cross-origin以其完整格式(起点+路径)发送引荐来源网址。 否则，仅发送原点

• same-origin the referrer is sent only when loading from the same origin (port, protocol, domain) in the iframe

  仅当从iframe中的相同来源(端口，协议，域)加载时，才发送same-origin的引荐来源网址

• strict-origin sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP

  如果当前页面是通过HTTPS加载的，并且iframe也通过HTTPS协议加载，则strict-origin会将原点作为引荐strict-origin发送。 如果通过HTTP加载iframe，则不发送任何内容

• strict-origin-when-cross-origin sends the origin + path as the referrer when working on the same origin. Sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP

  当在相同原点上工作strict-origin-when-cross-origin将原点+路径作为引荐strict-origin-when-cross-origin发送。 如果当前页面是通过HTTPS加载的，并且iframe也通过HTTPS协议加载，则将原点作为引荐来源发送。 如果通过HTTP加载iframe，则不发送任何内容

• unsafe-url: sends the origin + path as the referrer even when loading resources from HTTP and the current page is loaded over HTTPS

  unsafe-url ：即使从HTTP加载资源并且当前页面通过HTTPS加载，也将原始+路径作为引荐来源发送