页面嵌入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后两者都支持
网友评论