HTML 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
属性允许你指定一些要显示的内联 HTML。它是 src
的替代品,但完全不支持 IE 浏览器:
<iframe srcdoc="<p>Hello iframe!</p>" />
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
以访问顶级浏览上下文
目前只是实验性的,并且只支持基于 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 的访问权限
这些都是实验性,完整内容查看 👉 特征策略。
加载 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 发送