iframe跨域

男娘i 2022-05-18 06:38 281阅读 0赞

按情境分  
1、不跨域时  
2、主域相同、子域不同时  
3、主域不同

##    1、不跨域时 ##

访问iframe： oIframe.contentWindow  可以直接获得iframe的window属性  
访问父级：window.parent就是父级的window  
访问顶级：window.top

## 2、主域相同、子域不同时 ##

通过设置window.domain将两个页面置为一样，然后就可以像情况一进行处理了

设置 document.domain = "domain.com";

## 3、主域不同 ##

### 3.1 父获取子页面想发送的值 ###

父页面中：

子页面：

设置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.２ 子页面获取父页面传来的值 ###

通过改写子页面ｓｒｃ的哈希值来向子页面传递值

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)