父页面 与 iframe 子页面跨域通讯

父页面 与 iframe 子页面跨域时，直接函数调用报跨域错误，需要通过 postMessage 传递信息

父页面 调用 子页面

父页面代码

var frame =  document.getElementById("frame-id");
frame.contentWindow.postMessage({
    name: "abc",
    age: 18
}, "*")

postMessage 传入两个参数

参数一为任意数据类型， 通常用一个对象封装业务数据。

参数二为目标源设置，默认为"/",  用 "*" 可以实现跨域调用

iframe 子页面代码

window.addEventListener("message", function(event) {
    console.log(event);
    // event.data 父页页传过来的消息对象
    // event.data.name 父页页传过来的消息对象的 name
    // event.data.age 父页页传过来的消息对象的 age
});

通过 event.data 获取传过来的数据

子页面 调用 父页面

iframe 子页面代码

window.parent.postMessage({
    name: "abc",
    age: 18
}, "*");

参数定义与父页面调 iframe 子页面相同

父页面代码

window.addEventListener("message", function(event) {
    console.log(event);
    // event.data 子页面传过来的消息对象
    // event.data.name 子页面传过来的消息对象的 name
    // event.data.age 子页面传过来的消息对象的 age
});