回顾HTML的iFRAME标签、基本用法、沙箱和加载属性

标签用于将其他网页集成到网页中。

基本用法

标签生成一个指定区域，其中嵌入其他网页。它是一个容器元素。如果浏览器不支持，则会显示内部子元素。

<iframe 
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
</iframe>

以上代码嵌入当前网站https://www.example.com，显示区域宽度为100%❙，高度为像素。如果当前浏览器不支持，则会显示一个链接供用户点击。

浏览器一般都支持，所以内部子元素不需要编写。

的属性如下。

• allowfullscreen：允许嵌入的网页全屏显示。需要全屏API支持。请输入相关的 JavaScript 教程。
• frameborder：是否绘制边框，0不可绘制，1可绘制（默认值）。建议尽量少用该属性，并在CSS中设置样式。
• src：嵌入网站的 URL。
• 宽度：显示区域的宽度。
• 高度：显示区域的高度。
• Sandbox：设置嵌入网站的权限，详细信息见下文。
• 优先级：浏览器下载嵌入网页的优先级。可以设置三个值。 high表示高优先级，low表示低优先级，auto表示由浏览器决定。 ？ 目标

沙盒属性

嵌入式网站默认具有正常权限，如运行脚本、提交表单、弹窗等。如果嵌入的网站是另一个网站的页面，你不知道对方正在执行什么操作，因此存在安全风险。为了限制的风险，HTML提供了属性sandbox，可以设置嵌入网页的权限，相当于一个隔离层，一个“沙箱” 。

sandbox 可以用作布尔属性来禁用所有限制。属性

<iframe  sandbox>
</iframe>

Sandbox可以设置具体值来逐个元素表示开放限制。如果某项未设置，则表示您没有权限。

• allow-forms：允许表单。
• allow-modals：允许提示框，即允许执行window.alert()等JavaScript方法以及其他生成弹出提示框的JavaScript方法。
• allow-popups：允许嵌入网页使用window.open()方法打开窗口。
• allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱限制。
• allow-orientation-lock：允许嵌入式网站使用脚本锁定屏幕方向，即横向或纵向。
• allow-pointer-lock：允许嵌入式网站使用指针锁定 API 来锁定鼠标移动。
• allow-presentation：允许嵌入式网站使用演示 API。
• allow-same-origin：如果不启用此限制，则所有加载的网页都将被视为跨域。
• allow-scripts：允许嵌入网页运行脚本（但不创建弹出窗口）。
• allow-storage-access-by-user-activation：如果 sandbox 属性同时设置为此值和
  • ❝ ❝ 允许嵌入的第三方网站通过用户发起的document.requestStorageAccess()请求通过Storage Access API访问父窗口的cookie。
  • allow-top-navigation：允许从嵌入网页的顶级窗口进行导航。
  • allow-top-navigation-by-user-activation：允许通过嵌入网页导航顶级窗口，但必须由用户激活。
  • allow-downloads-without-user-activation：允许嵌入式网站在无需用户激活的情况下启动下载。

  注意，请勿同时设置 allow-scripts 和 allow-same-origin 属性。这允许嵌入式网站更改或删除属性Sandbox。由

  loading 属性

  指定的网页会立即加载，这有时不是所需的行为。 加载前滚动到视口，这样可以节省带宽。

  loading属性可以触发网站的延迟加载。该属性可以采用以下三个值。

  • 作者
  • lazy：延迟加载，在即将滚动到视口时开始加载。
  • eager：直接加载资源，无论其在页面上的位置如何。

  <iframe  loading="lazy"></iframe>
  

  上面的代码允许延迟加载。

  需要注意的是，如果隐藏，则loading属性无效，会立即加载。只要满足以下条件之一，Chrome浏览器就会将视为隐藏。

  • 的宽度和高度为 4 像素或更小。
  • 样式设置为显示：无或可见性：隐藏。
  • 将 从屏幕上放置，定位坐标为负 X 或负 ❙❙。