iframe内联

iframe是什么？

就是一个标签，dom元素。

有什么作用？

1. 网页嵌套网页；如：导航栏tab切换页、在线编辑器、广告植入。
2. 历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案。
3. 跨域通信等；

iframe 优缺点？

1. iframe会阻塞页面加载；（页面阻塞）当一个页面的iframe标签过多时，会导致刷新图标一直转圈，给人一种迟迟没有加载好的感觉。因为window的onload事件只有在所有标签加载完才会触发。（注意：通过js动态添加的iframe的src不会阻塞页面）

父子窗口window的获取

1. 判断iframe是否加载完成
   非IE：iframe.onload = function(){} //页面加载完成会触发onload事件
   IE:

iframe.onreadystatechange = function(){
	if(iframe.readyState == "complete" || iframe.readyState == "loaded"){
			//进到此处才说明加载完成
	}
}

3. 获取子窗口的值（要求两个同源，不满足同源则不能）
   方法一：document.getElementsByTagName('iframe')[0].contentWindow; //contentWindow是指子窗口的window 注意判断是否加载完成
   方法二：window.frames["name"].key; //name是子窗口的名字，key是要找的值 部分浏览器不支持
4. 获取父窗口的值
   window.parent;//得到父窗口的window
5. 如果是多级窗口，要获取最顶层窗口的window:window.top;

父子窗口通信及跨域(现在不利用iframe跨域)

1. 父级值传给子级：利用哈希值跨域
   在父级窗口中，动态的将要获取的值添加到iframe的src中，在子窗口使用window.location.hash：

iframe.src += "#" + key; //key是要获取的值，比如一个age =20

2. 子级的值传给父级：window.name
   在子级设置window.name等于某值;
   然后将子级替换为与父级同源的一个页面
   然后在父级获取到:frame.contentWindow.name