Javascript Reactjs：如何从Window.open（）到我的父组件使用Window.postMessage（）_Javascript_Reactjs

Javascript Reactjs：如何从Window.open（）到我的父组件使用Window.postMessage（）

javascript reactjs

Javascript Reactjs：如何从Window.open（）到我的父组件使用Window.postMessage（）,javascript,reactjs,Javascript,Reactjs,我正试图通过一条简单的“Test done”post消息与我的window.open（）和我的父页面进行通信。我也看过一些例子，但不知道如何在这里复制它任何建议我可以在这里做什么，使之成为可能 //主页 class HomePage extends React.Component { handleTestVisibleClick = () => { const testUrl = process.env.PUBLIC_URL+"/test.html";

我正试图通过一条简单的“Test done”post消息与我的window.open（）和我的父页面进行通信。我也看过一些例子，但不知道如何在这里复制它

任何建议我可以在这里做什么，使之成为可能

//主页

class HomePage extends React.Component {

handleTestVisibleClick = () => {
    const testUrl = process.env.PUBLIC_URL+"/test.html";

    document.getElementsByClassName('connect-dialog')[0].style.visibility = 'hidden';

    var leftPosition, topPosition;
    var width = 410;
    var height = 460;
    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
    topPosition = (window.screen.height / 2) - ((height / 2) + 10);
    var windowOpen = window.open(testUrl, "Window2",
    "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
    + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
    + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");

  
    var timer = setInterval(function() { 
      if(windowOpen.closed) {
          clearInterval(timer);
          document.getElementsByClassName('connect-media-dialog')[0].style.visibility = 'visible';
      }
    }, 100);
  }
  render() {
    return (
      <dialog open={open} className="section">
          <Button  className="connect-test-button"
            onClick={()=>{ this.handleTestVisibleClick() }}>
            Test
          </Button>
          
      </dialog>
    ); 

  }
};

export default HomePage;

类主页扩展React.Component{
handleTestVisibleClick=（）=>{
const testUrl=process.env.PUBLIC_URL+“/test.html”；
document.getElementsByClassName（'connect-dialog'）[0].style.visibility='hidden'；
变量leftPosition，topPosition；
var宽度=410；
var高度=460；
leftPosition=（window.screen.width/2）-（width/2）+10；
topPosition=（window.screen.height/2）-（height/2）+10；
var windowOpen=window.open（testUrl，“Window2”，
“状态=否，height=“+height+”，width=“+width+”，resizable=是，left=”
+leftPosition+”，top=“+topPosition+”，screenX=“+leftPosition+”，screenY=”
+topPosition+”，toolbar=no，menubar=no，scrollbars=no，location=no，Directory=no”）；
var timer=setInterval（函数（）{
如果（窗口打开。关闭）{
清除间隔（计时器）；
document.getElementsByClassName（'connect-media-dialog'）[0].style.visibility='visible'；
}
}, 100);
}
render（）{
返回(
{this.handleTestVisibleClick（）}>
试验
); 
}
};
导出默认主页；

//testpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta charset="UTF-8">
    <title>Test Device</title>
    <script>
      function testdone() {
          self.close();
          window.opener.postMessage("Test Done", '*');
      }
    
    </script>
</head>
<body>
    
<button onclick="testdone()"> End Test </button>
    
</body>
</html>


试验装置
函数testdone（）{
self.close（）；
window.opener.postMessage（“测试完成”，“*”）；
}
结束测试

您可以通过访问子窗口的

postMessage

属性来完成此操作

var child=window.open（'https://www.example.com')
child.postMessage（“某物”）

JSFIDLE-

您是否能够在设置此对话框切换的位置创建沙箱或添加组件？您好@Dax感谢您的时间。。我只是用

document.getElementsByClassName（'connect-media-dialog'）[0]来解释这一点@Dax，但如果我想从我的窗口发送邮件，请打开（）。。。到我的主页。。。如何做到这一点。。。任何建议。你能用你当前的代码更新你的问题吗？“从窗口发帖”是什么意思？@Dax我想他的意思是：您好，谢谢您的回答，但这里是我从窗口发帖的例子。打开（Url）。。。它应该向父组件发回一条消息，说明T测试已经完成。@Tammy这就是您要做的吗？是的，差不多。。。在我的测试url中有一个测试完成按钮。因此，当单击“测试完成”按钮时，它会向家长发送一条消息。@Tammy您可以只听一次单击，然后运行一个函数。您能用我的代码指导我吗。我对这种情况不太了解。