iframe标签用于在网页里面嵌入其他网页

1、基本用法

iframe标签生成一个指定区域，在该区域中嵌入其他网页。是一个容器标签。 iframe有以下属性:

• allowfullscreen：允许嵌入的网页全屏显示，需要全屏API的支持
• frameborder：是否绘制边框，0是不绘制，1是绘制（默认），CSS设置
• src：嵌入网页的URL
• width：显示区域的宽度
• height：显示区域的高度
• sandbox：设置嵌入网页的权限
• importance：浏览器下载嵌入的网页的优先级：high/low/auto
• name：内嵌窗口的名称，可用于a标签、form标签和base标签的target属性
• referrerpolicy：请求嵌入网页时，HTTP请求的Referer字段的设置

2、sandbox属性

嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。为了限制iframe标签的风险，HTML提供了sandbox属性，允许设置嵌入网页的权限，等同于提供了一个隔离层，即“沙箱”。 sandbox可以当做布尔属性使用，表示打开所有限制。 sandbox可以设置具体的值，表示逐项打开限制，未设置表示不具有该权限。 不要同时设置allow-scripts和allow-same-origin属性，将使得嵌入网页可以改变或删除sandbox属性。

• allow-forms：允许提交表单
• allow-modals：允许提示框
• 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：
• allow-top-navigation：允许嵌入网页对顶级窗口进行导航
• allow-top-navigation-by-user-activation：
• allow-downloads-without-user-activation：

3、loading属性

iframe标签指定的网页会立即加载，有时这不是希望的行为，loading属性可以触发iframe网页的懒加载。loading属性可取以下三个值：

• auto：浏览器的默认行为
• lazy：iframe的懒加载，即将滚动进入视口时开始加载
• eager：立即加载资源 如果iframe是隐藏的，loading属性无效：
• iframe的宽高为4像素或更小
• 样式设为display：none或visibility：hidden
• 使用定位坐标为-X或-Y，将iframe放置在屏幕外