iframe是什么?
就是一个标签,dom元素。
有什么作用?
- 网页嵌套网页;如:导航栏tab切换页、在线编辑器、广告植入。
- 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案。
- 跨域通信等;
iframe 优缺点?
- iframe会阻塞页面加载;(页面阻塞)当一个页面的iframe标签过多时,会导致刷新图标一直转圈,给人一种迟迟没有加载好的感觉。因为window的onload事件只有在所有标签加载完才会触发。(注意:通过js动态添加的iframe的src不会阻塞页面)
父子窗口window的获取
- 判断iframe是否加载完成
非IE:iframe.onload = function(){} //页面加载完成会触发onload事件
IE:
iframe.onreadystatechange = function(){
if(iframe.readyState == "complete" || iframe.readyState == "loaded"){
//进到此处才说明加载完成
}
}
- 获取子窗口的值(要求两个同源,不满足同源则不能)
方法一:document.getElementsByTagName('iframe')[0].contentWindow; //contentWindow是指子窗口的window 注意判断是否加载完成
方法二:window.frames["name"].key; //name是子窗口的名字,key是要找的值 部分浏览器不支持
- 获取父窗口的值
window.parent;//得到父窗口的window
- 如果是多级窗口,要获取最顶层窗口的window:
window.top;
父子窗口通信及跨域(现在不利用iframe跨域)
- 父级值传给子级:利用哈希值跨域
在父级窗口中,动态的将要获取的值添加到iframe的src中,在子窗口使用window.location.hash
:
iframe.src += "#" + key; //key是要获取的值,比如一个age =20
- 子级的值传给父级:window.name
在子级设置window.name等于某值;
然后将子级替换为与父级同源的一个页面
然后在父级获取到:frame.contentWindow.name