深刻理解iframe

本文并非一篇iframe API文档讲解，所以想了解iframe API的同窗请移步 MDN， 我将在如今浏览器的角度与你们取探讨iframe, 所以，本文中虽然会说起一些iframe在旧浏览器中的应用， 但并不会去讲解。 因此，您对iframe在旧浏览器中的应用场景感兴趣的话，还请本身搜索相关资料。 同时， 我也会从浅入深的来与你们探讨iframe中的一些特性、各类现代浏览器中的渲染模式、应用场景、以及在现代开发中的影响。

什么是iframe

在HTML中有三种结构特征：树结构、层次结构、框结构。iframe正是框结构中的一员。每一个iframe中都是一个独立的沙箱，它们拥有本身的window以及DOM。

为何须要理解它

虽然说在平常开发中，咱们应尽可能少使用iframe，但在一些特殊场景下，咱们也是不可避免须要使用iframe。所以，深刻理解iframe可以让咱们更合理的使用它。

渲染与阻塞

前面讲到iframe是HTML三种结构中的框结构，框结构中还有另外两个元素：frameset和frame，但它们都已废弃，再也不推荐使用。 
每个框结构都有一个独立的HTML文档，而不包含以上三种框结构中任意一种的网页就是最简单的框结构。其示图以下： 

 

对应的，复杂的框结构即多个框结构复合在一个页面中， 其示图以下： 

 

像上图中的多框结构，很是不适合移动端，由于这种结构的页面多触控操做很是不友好。 到此，对于框结构的基础知识普及便告一段落了， 下面笔者将分别从 Chrome、Firefox、Safari、IE 11的测试结果来分析iframe在不一样浏览器中的渲染模式以及阻塞状况，代码以下： 
咱们先定义iframe要引用的页面，并编写以下代码：

const start = Date.now();
const limit = function() {
return Date.now() - start;
}
while(limit() <= 1000 * 5) {}

接下来， 在主页面中引入它： 

<iframe src="./frame-sets.html"></iframe> 

代码很简单， 就是让iframe 阻塞至少5秒钟，接下来分别在 Chrome、Firefox、Safari、IE11 中测试阻塞状况:

	Chrome	Firefox	Safari	IE11
阻塞主页面渲染	false	true	true	true
阻塞主页面onload	true	true	true	true

从结果来看，阻塞onload并没有异议，历来都是如此，可是惊讶的发如今Chrome中并不会阻塞主页面的渲染， 我猜Chrome为iframe建立来一个单独的沙箱进程吧。

无阻塞加载iframe

前面讲了iframe与阻塞，在不一样的浏览器中表现大体相同（只有Chrome不会阻塞主页面渲染，onload则都会受到阻塞）。在极大多数状况下，iframe都会阻塞主页面的渲染， 因此咱们急需采用一种不阻塞主页面渲染的加载iframe的方式。那若是才能作到无阻塞加载iframe呢？思路有二：1. 直接使用setTimeout异步加载iframe；2. 在页面触发onload以后加载iframe。话很少说， 直接亮代码：

// setTimeout 形式
setTimeout(function() {
frame.src = 'other-page-url';
}, 0);

 

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

window.addEventListener('load', function() {
iframe.src = 'other-page-url';
});

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

iframe与跨域

跨域 是咱们开发过程当中常常遇到的问题，而如何解决跨域的问题， 网络上已经有很是多可行的方案， 至于最终选择何种方案去处理， 还得结合实际业务场景选择最合适的方案。接下来，咱们将缩小解决方案的范围， 只限定在iframe中去讲解几种跨域方案。 
为了模拟跨域， 咱们更改本地hosts。 以mac os 为例： 

cd // 
cd private/etc 
vim hosts 

添加以下代码：

127.0.0.1 demo.com
127.0.0.1 cross.demo.com
127.0.0.1 other.com

• 方案一： 
  document.domain，这是浏览器暴露出来的一个准只读属性（之因此说它是准只读属性，是由于它能够设置为当前域名的超级域），利用这个特性，能够实现主域名相同子域名不一样的网页实现通讯。代码以下： 
  main.html(http://demo.com:15100/main.html)

<script>
document.domain = 'demo.com';
window.alertFrameMsg = function(msg) {
alert(msg);
}
const frame = document.querySelector('#myFrame');
frame.src = 'http://cross.demo:15100/frame-sets.html';
</script>

 

frame-sets.html(http://cross.demo:15100/frame-sets.html)

<script>
document.domain = 'demo.com';
parent.alertFrameMsg('hello, world!');
</script>

 

如你所见， 只须要将二者的document.domain设置为超域， 就能够实现主页面与iframe的跨域通讯了。并且相互之间的访问很是自由(能够双向通讯)

• 方案二： 
  window.postMessage ，HTML5提供的API，能够安全的启用跨域通讯。语法很是简单:targetWindow.postMessage(data, targetOrigin)，第一个参数是要传递的数据，使人高兴的是将要发送到目标window的数据，会采用结构克隆化算法序列化， 这意味着咱们无需本身序列化，便可安全的传输数据对象到目标window。如何在目标窗口接收到数据呢？编写以下代码便可：

window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);

evt.data 便是 postMessage 中传递过来的数据！ 结合上下文， 综合起来： 
main.html(http://demo.com:15100/main.html)

<script>
window.frames['myFrame'].contentWindow.postMessage({name: 'injser', age: 18}, 'http://other- demo.com:15100');
</script>

frame-sets.html(http://other.com:15100/frame-sets.html)

<script>
window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);
</script>