如何使用window.postmessage与父窗口进行通信

Question

我正在创建一个react应用程序，希望我的用户将其嵌入到他们的网站上。这个应用程序将显示在两个iframe中，但我想一次只显示一个iframe。因此，该应用程序的一部分将是一个简单的按钮，第二部分将是用户决定使用该应用程序后弹出的表单(这是一个聊天应用程序(

我设置了一个非常简单的组件来显示按钮，这样它就可以向父网站发送消息。我不确定我做错了什么，但当发送window.postmessage事件时，我得到了错误：

Uncaught DOMException: Blocked a frame with origin "http://localhost:3002" from accessing a cross-origin frame.

以下是母网站代码示例：

<h1>Hello! This is some static content</h1>
<iframe src="http://localhost:3002"
style="width: 108px; height: 50px; padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; right: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom;"
id="dbhchat"></iframe>
<h3>Thanks for checking out my blog!</h3>
<script>
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data! 
if (event.origin.startsWith('http://localhost:3002')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site! 
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
</script>

以及我向父窗口发送消息的组件：

import React from 'react';
import { IconButton } from '@material-ui/core';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import './App.css';
function App() {
const send = () => {
if (window && window.parent) {
console.log('we have message sending here', window.parent);
window.parent.postMessage('message', 'http://localhost:3002', false);
}
}
return (
<div className="App">
<header style={{ background: 'red' }} className="App-header">
<IconButton onClick={send} color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</header>
</div>
);
}
export default App;

提前感谢您的帮助！

Answer 1

我发现了一个奇怪的问题解决方案。我真的不知道为什么这样做，但在那之后，简单地将e.preventDefault()添加到react-send函数中就可以了。

const send = (e) => {
e.preventDefault();
if (window && window.parent) {
window.parent.postMessage({message: 'The message is being set up here', hide: 'dbhchat', show: 'dbhchat'}, '*');
}
}

加上这些，一切都很好。如果有人能提供更多关于为什么的细节，那就太好了！