如何获取 iframe 内的 window ?
- 获取子窗口
document.getElementsByTagName('iframe')[0].contentWindow
document.getElementsById('id').contentWindow
- 简易写法
window.frames['iframe 的 name']
- IE 专用
document.iframes[name].contentWindow
document.iframes[i].contentWindow
父子页面窗口的关系
window.self:自己
window.parent:父级窗口属性
window.top:顶级窗口属性
父子窗口通信
父访问子(等待子 iframe 加载完成后可以通过 iframe.contentWindow 变量 访问也会涉及跨域问题)。
子访问父涉及跨域问题。
判断 iframe 加载完成
非 ie 下使用 onload 事件
iframe(dom 元素).onload = function() {}ie 下使用 onreadystatechange 或者设定计时器
iframe.onreadystatechange = function() {
if(iframe.readyState == "complete" || iframe.readyState == "loaded") {
alert("Local iframe is now loaded");
}
}
iframe 概念
iframe 就是一个标签 dom 元素
可以一个网页里嵌入另一个页面
导航栏 tab 切换页(古老做法)、在线编辑器、广告植入
历史记录管理,解决 ajax 化网站响应浏览器前进后退按钮的方案
跨域通信等
http://www.w3school.com.cn/tiy/Lasp?f=html_a
iframe 利弊
iframe 阻塞页面加载
触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的“忙”指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。
iframe 受跨域限制如何解决
document.domain 解决跨域限制最好的办法
window.location.hash 解决子页面访问父页面数据问题(window.location.href)
window.name 解决父页面访问子页面的数据问题
H5 PostMessage