作者 zhangl
iframe是什么
- iframe就是一个html标签dom元素
作用
- 可以将一个网页嵌入另一个网页
- 导航tab栏、在线编辑、广告植入等
- 历史记录管理,解决ajax导致的网站响应浏览器前进后退的方案
- 跨域通信等
iframe弊端
- 阻塞页面加载
获取iframe内的window
获取子窗口
- document.getElementsByTagName('iframe')[0].contentWindow
- document.getElementById('id')[0].contentWindow
- window.frames['iframe的name']
获取父窗口
- window.parent
IE专用
- document.iframes[name].contentWindow
- document.iframes[i].contentWindow
取值
父取子
<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--获取子变量-->
<script>
var cIframe = document.getElementsByTagName('iframe')[0];
cIframe.onload = function () {
console.log(cIframe.contentWindow.childrenAge);
};
</script>
复制代码
<!--子-->
<!--定义变量-->
<script>
var childrenAge = 20;
</script>
复制代码
子取父
<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--定义变量-->
<script>
var fatherAge = 50;
</script>
复制代码
<!--子-->
<!--获取变量-->
<script>
var fIframe = window.parent;
console.log(fIframe.fatherAge);
</script>
复制代码
父子页面窗口的关系
- window.self -- 自己
- window.parent -- 父级窗口对象
- window.top -- 顶级窗口对象
判断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');
}
}
复制代码
父子窗口跨域通信
hash
<!--origin http协议-->
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script>
var oIframe = document.getElementsByTagName('iframe')[0];
var oIframeSrc = oIframe.src;
var age = 55;
document.onclick = function () {
oIframe.src = oIframeSrc + '#' + age;
age++;
};
</script>
复制代码
<!--target file协议-->
<div>iframe2222</div>
<script>
var lct = window.location;
var preHash = lct.hash;
setInterval(function () {
if (preHash !== lct.hash) {
console.log(lct.hash);
preHash = lct.hash;
}
}, 300);
</script>
复制代码
触发origin页面点击事件,查看target页面的执行结果
- 缺点:
- target页需要使用计时器不断查看hash值变化, 性能消耗大
- origin页面不能获取到target页面的数据
- 数据放入hash中不安全
- 大小受到限制
window.name
这里需要借助一个临时页面充当两个跨域页面的桥梁
<!--target http协议-->
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script>
var oIframe = document.getElementsByTagName('iframe')[0];
var flag = true;
oIframe.onload = function () {
if (flag) {
oIframe.src = './temp.html';
flag = false;
} else {
console.log(oIframe.contentWindow.name);
}
};
</script>
复制代码
<!--tmep-->
空
复制代码
<!--orgin file协议-->
<div>iframe2222</div>
<script>
window.name = 20;
</script>
复制代码
- 缺点:
- 数据放入hash中不安全
- 大小受到限制
转载于:https://juejin.im/post/5d05f1326fb9a07ee9586ec9