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！