关于 iframe
经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，说白了就是用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。
<iframe id="juejin-iframe" src="https://juejin.cn/editor/drafts/6992768981195030558"></iframe>
<!-- 基本语法：<iframe src="*url*" title="*description*"></iframe> -->
可以看出，iframe就是一个普通的元素，与span,div一样。
iframe是内联元素还是块元素？
- iframe可以设置width,height并且有效
- iframe像普通文本一样不会换行
iframe - 链接的目标
iframe 可以用作链接的目标框架。
该 target 链接的属性必须引用 name iframe的属性：
<iframe src="demo_iframe.html" name="iframe_a" title="Iframe Example"></iframe>
<p>
<a href="https://www.juejin.cn" target="iframe_a">juejin.com</a>
</p>
iframe标准属性
请搂下图 👇👇👇
| 属性 | 值 | 属性 |
|---|---|---|
| src | URL | 设置框架的地址，可以使用页面地址，也可以是图片地址 |
| name | 字符串 | 指定框架的名字 |
| width | 长度值或百分比 | 框架的宽度 |
| height | 长度值或百分比 | 框架的高度 |
| frameborder | 0｜1 | 用来定义是否需要显示边框 |
| scrolling | yes｜no｜auto | 框架的高度 |
| marginheight | 长度值 | 框架内顶部和底部边距 |
| marginwidth | 长度值 | 框架内左侧和右侧边距 |
| longdesc | URL | 描述此框架内容的长文档的URL。可为那些不支持框架的浏览器使用此属性。 |
上图是iframe的核心属性，下面还有一些：
iframe的优点：
-
iframe能够原封不动的把嵌入的网页展现出来。
-
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
-
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
-
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
iframe内存的释放
iframe src不设置为 about:blank ，内存不会释放掉，还必须用 iframe.document.write(''); 这样才能将内容清空
但是这样处理之后任然会有500-1000K左右的内存残留，这就是 ie6 的 iframe bug!!!
动态创建的iframe总会耗费掉一些内存。
function clearIframe(id){
var el = document.getElementById(id),
iframe = el.contentWindow;
if (el){
el.src = ' about:blank ';
try {
iframe.document.write( '' );
iframe.document.clear();
} catch (e){};
// 以上可以清除大部分的内存和文档节点记录数了
// 最后删除掉这个 iframe
document.body.removeChild(el);
}
}
但是如果是https协议，在设置about:blank则报错了，需要更改为javascript:void(0)
