H5之iframe

Posted 2021-01-22 maoxiaodun

iframe 属于html的三种结构之一的框结构（其余两种树结构和层结构），iframe是一个拥有独立窗体的标签，他非常损耗资源，不易过多使用

                <iframe src="nov24.html" width="100%" height="100%" frameborder="0" name="iframea"></iframe>
		<p><a href="https://www.baidu.com" target="iframea">BAIDU.COM</a></p>　　

上面是一个简单的iframe 

iframe是否会阻塞页面的加载呢，答案是的，通常页面首先会进行解析渲染，将html 文件解析为dom树，在将css文件解析为css树，最后合成为render树，此时进行layout 计算各个元素节点在屏幕的位置，然后进行回流（当元素本身结构发生变化时）重绘（当元素本身属性发生变化时，结构不变）最后渲染在浏览器上，这些操作完成之后才能进行onlaod事件加载，执行js操作。

如果此时有iframe嵌入在页面中，那么渲染时需要等子页面渲染完成之后才能进行父页面的渲染，onload事件加载也会因此被阻塞

如果此时我们用js动态生成iframe，并且放在onload事件之后去触发，那么此操作在chrome中不会阻塞页面的onload事件，但其他浏览器的onload事件依旧会被阻塞。

浏览器	chrome	safari	firefox	ie
是否阻塞浏览器页面渲染	true	true	true	true
是否阻塞浏览器页面onload事件	false	true	true	true

 

 

 

 

二、跨域

document.domain是比较常用的跨域方法。实现最简单但只能用于同一个主域下不同子域之间的跨域请求，比如 foo.com 和 img.foo.com 之间，img1.foo.com 和 img2.foo.com 之间。只要把两个页面的document.domain都指向主域就可以了，比如document.domain=‘foo.com‘;。
设置好后父页面和子页面就可以像同一个域下两个页面之间访问了。
父页面通过ifr.contentWindow就可以访问子页面的window，子页面通过parent.window或parent访问父页面的window，接下来可以进一步获取dom和js。