Failed to execute 'postMessage'

2022-09-01  本文已影响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后两者都支持

上一篇 下一篇

猜你喜欢

热点阅读