html的iframe属性

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

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

1.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>标签的介绍。

2.iframe的优缺点。

优点：

iframe能够原封不动的把嵌入的网页展现出来。

如果有很多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

如果遇到加载缓慢的第三方内容，如图标、广告，这些问题可以由iframe来解决。

缺点：

1.iframe会阻塞主页面的onload事件。

2.iframe和主页面共享链接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。会产生很多页面，不容易管理。

3.iframe框架结构有时会让人感到迷惑，如果框架个数多，可能会出现上下、左右滚动条，会分散访问者的注意力，造成用户体验感差。

4.iframe代码复杂，无法被一些搜索引擎搜到，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于搜索引擎优化。

5.很多的移动设备无法完全显示iframe框架，设备兼容性差。

6.iframe框架页面会增加服务器的http请求。

3.为什么很多项目的时候一般不用iframe？

iframe是一个单独的容器，因此不会应用全局的css样式。
iframe会和网页共用域名链接池，因此可能由于iframe占用了连接数导致加载阻塞。