H5之iframe

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。

原文地址:https://www.cnblogs.com/maoxiaodun/p/10011375.html