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

作者: 刘一二 发布时间: 2023年7月15日 浏览: 115

父页面 与 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
});

 

 

最新文章
热门文章
导航