美文网首页
Failed to execute 'postMessage'

Failed to execute 'postMessage'

作者: 多记录多学习 | 来源:发表于2022-09-01 18:03 被阅读0次

页面嵌入iframe,两者之间通信的时候报错


image.png
  //http://localhost:5555/index.vue
 <iframe src="http://localhost:5556" frameborder="0" width="100%" height="100%"></iframe>
 //http://localhost:5556/index
 //5556页面需要给5555页面进行传递信息
 window.parent.postMessage(
          {
            return: true,
          },
          // parentHost,
        );
这样就会报错跨域问题,无法传递信息
//需要添加指定的origin,就能正常通信了
const parentHost = http://localhost:5555
window.parent.postMessage(
         {
           return: true,
         },
         parentHost,
       );
// locahost:5555接收信息
 window.addEventListener(
      'message',
      event => {
       console.log(event.data.return)
      },
      false,
    );

其他的推荐也有把window.parent.postMessage改成top.postMessage,但是我没有添加origin的时候还是报错,添加origin后两者都支持

相关文章

网友评论

      本文标题:Failed to execute 'postMessage'

      本文链接:https://www.haomeiwen.com/subject/urysnrtx.html