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

最新推荐文章于 2023-12-15 16:50:29 发布

weixin_46852620

最新推荐文章于 2023-12-15 16:50:29 发布

阅读量1.9k

点赞数

分类专栏：学习electron

本文链接：https://blog.csdn.net/weixin_46852620/article/details/111828341

版权

学习electron 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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)
})

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