按情境分
1、不跨域时
2、主域相同、子域不同时
3、主域不同
1、不跨域时
访问iframe: oIframe.contentWindow 可以直接获得iframe的window属性
访问父级:window.parent就是父级的window
访问顶级:window.top
2、主域相同、子域不同时
通过设置window.domain将两个页面置为一样,然后就可以像情况一进行处理了
设置 document.domain = "domain.com";
3、主域不同
3.1 父获取子页面想发送的值
父页面中:
var flag = true;
oIframe.onload = function(){
if(flag){
oIframe.src = './xl.html'; //必须设置一个
flag = false;
} else {
console.log(oIframe.contentWindow.name);
}
}
子页面:
设置window.name = 某值
window.name 是什么:
只要浏览器窗口不关闭,无论中间调转了多少次链接,页面变成什么样子,都可以获得窗口下设置的window.name值
name 在浏览器环境中是一个全局window对象的属性,当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
name 属性仅对相同域名的 iframe 可访问
window.name 的优势:
数据量更大(2M)、更安全、可传递多种数据格式
window.name 的劣势:
只适用于隐藏iframe的情形
信息交互的逻辑:
将子页面js中的window.name值设置为想要向父页面传递的信息。当iframe即子页面加载完成后,触发父页面的iframe.onload事件,在父页面总将子页面的src设置为'suibian.html'(即让子页面与自己貌似同源),并且设置一个flag让他不在重新加载,因为这个src值一谢iframe就会重新加载。在这个时候获取子页面的contentWindow的属性就能取到了
3.2 子页面获取父页面传来的值
通过改写子页面src的哈希值来向子页面传递值
location.hash原理:
1、动态改变location.hash,iframe不会重载
2、无论跨域与否,iframe内可以获取自己的location.hash
父页面中:
设置oIframe.src = oIframe.src + "#" + sendValue
子页面中:
//每隔1秒种来看父页面有没有改自己的hash值,有的话说明有信息传给我
var lastHash = window.location.hash;
setInterVal(function(){
if(lastHash != window.location.hash) {
console.log(location.hash.slice(1));
lastHash = window.location.hash;
}
}, 1000)