iframe之间通信

如题：网页嵌套一个iframe，这个iframe有自己的window对象，有自己的store，数据互不干扰，美滋滋；

但也正因为数据互不干扰，通信就成了难题。

今天记录下跨iframe调用的操作：

1. 在window上注册方法，在子iframe中调用：

　　父页面：window["messageStr"]=function(arg){console.log(arg)}；

　　子页面：window.parent.messageStr("from child");// 但记得try catch；

　　特点：简单，嘻嘻

2. 用postMessage方法

　　父页面：

window.addEventListener("message",(event)=>{
     console.log("event >>: ", event);
});

　　子页面：

try {
    let win = window.parent;
    console.log("win>>: ", win);
    win.postMessage({data:1},“*”);
} catch (error) {
    console.log("error >>: ", error);
}

　　特点：对于多层不同域名嵌套就不灵了，lz恰好遇见这种情况。

3. 方法2的增强版：

　　父页面写法不变；

　　子页面加上域名：

        try {
            let win = window.parent;
            const origin = win.location.origin;
            win.postMessage({data:1},origin);
        } catch (error) {
            console.log("error >>: ", error);
        }

 

over！