window.open 不同源页面通信 传递数据

个人网站
https://kuangyx.cn
步骤:

1. 父页面打开子页面

2. 子页面发送消息给父页面通知页面加载完成

3. 父页面收到子页面加载完成后发送数据给子页面

代码示例:

父页面

const targetWindow = window.open("子页面地址", "_black");

window.addEventListener("message", e => {

  if (e.origin == "子页面地址") {

    console.log(e.data, "子页面发送来的数据");

    targetWindow.postMessage("发给子页面的数据", "*");

  }

});

子页面

window.addEventListener('message',e => {

  console.log(e.data,'父页面发送来的数据');

})

window.addEventListener('load',() =>{

  window.opener.postMessage('子页面加载完成');

})