iframe

<iframe
  src="https://www.example.com"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  sandbox
>
  <!-- 当浏览器不支持 iframe 时，显示链接（但一般都支持） -->
  <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
</iframe>

基本属性

• allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持（JS）。
• frameborder：是否绘制边框，0 为不绘制，1 为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。
• src：嵌入的网页的 URL。
• width：显示区域的宽度。
• height：显示区域的高度。
• importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high 表示高优先级，low 表示低优先级，auto 表示由浏览器自行决定。
• name：内嵌窗口的名称，可以用于、
  、的 target 属性。
• referrerpolicy：请求嵌入网页时，HTTP 请求的 Referer 字段的设置。参见标签的介绍。
• sandbox：设置嵌入的网页的权限，详见下文。

sandbox

为了限制<iframe>的风险，HTML 提供了 sandbox 属性，允许设置嵌入的网页的权限。（提供了一个隔离层-沙箱）

sandbox 为 bool 时，表示打开所有限制。但其中具体限制也可以逐一打开：

• allow-forms：允许提交表单。
• allow-modals：允许提示框，即允许执行 window.alert()等会产生弹出提示框的 JavaScript 方法。
• allow-popups：允许嵌入的网页使用 window.open()方法弹出窗口。
• allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。
• allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。
• allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。
• allow-presentation：允许嵌入的网页使用 Presentation API。
• allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。
• allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。
• allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。
• allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。
• allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。
• allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意：不要同时设置 allow-scripts 和 allow-same-origin 属性，这将使得嵌入的网页可以改变或删除 sandbox 属性

loading

<iframe>指定的网页会立即加载，但我们也可以让其滚动进入视口以后再加载以节约带宽，这时就可以使用 loading 属性。

loading 属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。

• auto：浏览器的默认行为，与不使用 loading 属性效果相同。
• lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。
• eager：立即加载资源，无论在页面上的位置如何。

<iframe src="https://example.com" loading="lazy"></iframe>

注意：如果<iframe>是隐藏的，则 loading 属性无效，将会立即加载。
<iframe>的宽度和高度为 4 像素或更小。
样式设为 display: none 或 visibility: hidden。
使用定位坐标为负 X 或负 Y，将<iframe>放置在屏幕外。