深入理解iframe

摘要：本文并不是一篇iframe API文档讲解，因此想了解iframe API的同学请移步 MDN，本文主要从浅入深的来与大家探讨iframe中的一些特性、各种现代浏览器中的渲染模式、应用场景、以及在现代开发中的影响。

一、什么是iframe

在HTML中有三种结构特征：树结构、层次结构、框结构。iframe正是框结构中的一员。每个iframe中都是一个独立的沙箱，它们拥有自己的window以及DOM。
iframe是HTML三种结构中的框结构，每一个框结构都有一个独立的HTML文档。
复杂的框结构即多个框结构复合在一个页面中， 其示图如下：

二、iframe无阻塞加载

在使用iframe时只有Chrome不会阻塞主页面渲染，但是在实际应用中还是要考虑到iframe阻塞主页渲染的情况。常用的解决思路有两种：1、直接使用setTimeout异步加载iframe；2. 在页面触发onload之后加载iframe。

// setTimeout 形式(提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval())
setTimeout(function() {
	var a = '<iframe id="sendjingdongifr" src="//www.baidu.com"></iframe>';
	$("#sendhidediv").html(a);
}, 400);

这种方式十分简洁， 但是需要注意的是， 如果你需要在页面onload后执行某些操作的时候， 需要在 setTimeout 回调中去绑定load函数。

window.addEventListener('load', function() {
	var a = '<iframe id="sendjingdongifr" src="//www.baidu.com"></iframe>';
	$("#sendhidediv").html(a);
});

这种方式也是简单粗暴，而且没有setTimeout方式灵活(不建议使用)， 没办法准确到iframe加载完后， 在主页面做一些操作。

三、Chrome使用iframe实现跨域

跨域是我们开发过程中经常遇到的问题，而如何解决跨域的问题， 网络上已经有非常多可行的方案， 至于最终选择何种方案去处理， 还得结合实际业务场景选择最合适的方案。

本文只讲述Chrome插件结合iframe解决跨域的问题：
在Chrome插件开发过程中,经常会遇到页面内包含iframe框架的情况,这个时候如果框架和顶层页面不同源,content_script是无法访问框架的内容的,这收到js跨域的限制. 解决方法其实很简单.就是在manifest.json文件中修改你的content_script字段,加入以下内容:

	"all_frames": true

参考：
深入理解iframe
在HTML5中有什么可以替代iFrame添加链接描述
把content_script注入iframe框架使其在框架内生效