iframe标签详解

iframe

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

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

<iframe>的属性如下:

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

sandbox 属性

嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML提供了sandbox属性，允许设置嵌入的网页的权限，等同于一个隔离层。

sandbox可以当作布尔属性使用，表示打开所有限制。

<iframe src="https://www.example.com" sandbox></iframe>

sandbox属性可以设置具体的值，表示逐项打开限制。 未设置某一项，就表示不具有该权限。

• 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：sandbox属性同时设置了这个值和allow-same-origin的情况下，允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求，经由 Storage Access API 访问父窗口的 Cookie。
• allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。
• allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。
• allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

loading属性

<iframe>指定的网页会立即加载，但我们有时候想让指定的网页进入视图后加载，而loading属性就是用来做这个操作的。

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

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

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

如果<iframe>是隐藏的，则loading属性无效，将会立即加载。

浏览器就会认为<iframe>是隐藏的条件：

• <iframe>的宽度和高度为4像素或更小。
• 样式设为display: none或visibility: hidden。
• 使用定位坐标为负X或负Y，将<iframe>放置在屏幕外。

iframe 的优缺点

iframe 之所以这么容易被忽视，其中一个很大的原因就是它产生的一些缺点问题。这里整理了部分 iframe 的优缺点。

优点：

• 可以减少数据的传输，减少网页的加载时间
• 使用起来很方便
• 方便开发，减少代码的重复率

缺点：

• 部分使用会产生跨域
• 会产生很多的页面，不易于管理
• 浏览器的后退按钮无效