Electron child parent - yaokun123/php-wiki GitHub Wiki

window.open子窗口和父窗口间的通信

一、window.opener.postMessage子窗口向父窗口传递消息

window.opener.postMessage(message,targetOrigin)，是将消息发送给指定来源的父窗口，如果未指定来源则发送给*，即所有窗口。

  • message : 传递的消息，是String类型的值

  • targetOrigin : 指定发送的窗口

在传递消息时，你需要在子窗口的页面中设置一些内容，所以我们不能使用远程的页面，而需要自己建立一个。在项目根目录，建立一个popup_page.html文件。 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我是弹出子窗口</h2>
    <button id="popBtn">向窗口传递信息</button>
</body>
<script>
    var popBtn = this.document.querySelector('#popBtn')
    popBtn.onclick = function(e){
        window.opener.postMessage('我是子窗口的消息')
    }
</script>
</html>

这样就可以从子窗口向父窗口发送信息了。

二、window.addEventListener父窗口接收信息

先打开demo3.html,在代码最下面，加一个

标签，记得要给一个ID，这样就用JS控制这个层了 
<div id="mytext"></div>

父窗口接收信息需要通过window.addEventListener,例如现在我们打开demo3.js，也就是父窗口的JS代码部分，写入下面代码：

window.addEventListener('message',(msg)=>{
    let mytext = document.querySelector('#mytext')
    mytext.innerHTML = JSON.stringify(msg)
})

这样父窗口就可以顺利接收到子串口发送过来的信息了，也可以轻松的显示在子窗口中。

⚠️ **GitHub.com Fallback** ⚠️