iframe跨域

按情境分
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)

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值