浏览器窗口通信的多种方式

» 介绍

浏览器窗口通信是比较常见的场景，比如登录、购物、在线聊天等等，下面简单介绍几种常见的通信方式和使用方法。

1.WebSocket

html5提供的全双工通讯的协议，浏览器和服务器之间建立一条不受限的双向通信的通道，双向数据传输，需要服务端支持。

使用方法可参考：nodejs搭建websocket服务实现多页面通信

2.StorageEvent

简单有效的方式，页面A通过storage存储消息，页面B监听storage即可捕获消息。

pageA.html:

<body>
<input type="text" id="msg">
<button id="send">发送</button>
<script>send.onclick = function () {let msg = document.getElementById("msg").valuelocalStorage.setItem('message', JSON.stringify({message: msg,from: 'pageA.html',date: Date.now()}))}</script>
</body>

pageB.html:

<body>
收到了消息：<span id="text"></span>
<script>window.addEventListener('storage', function (e) {// console.log(e.key, e.newValue, e.oldValue)let msg = JSON.parse(e.newValue)document.getElementById('text').innerText = msg.message})</script>
</body>

3.postMessage

支持跨域通信，需要获取打开窗口的句柄（对象），建立联系，安全地实现跨源通信。

pageA.html:

<body>
<button id="openw">打开B页面</button>
<br>
<input type="text" id="msg">
<button id="send">发送</button>
<script>let newWindow = nullopenw.onclick = function () {console.log(333)newWindow = window.open('pageB.html')}send.onclick = function () {let msg = document.getElementById("msg").valueif (newWindow)newWindow.postMessage(msg)}</script>
</body>

pageB.html:

<body>
收到了消息：<span id="text"></span>
<script>window.addEventListener('message', function (e) {document.getElementById('text').innerHTML = e.data})</script>
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

4.SharedWorker

实现一个在浏览器后台运行的共享worker，页面通过该worker进行连接和信息的传递。同源

本地不支持，需要放到服务器。（ webstorm可在浏览器中打开，vscode使用live server插件）测试。

worker.js:

let portList = [];onconnect = function (e) {let port = e.ports[0];if (portList.indexOf(port) < 0)portList.push(port);port.onmessage = function (e) {boardCast(e.data);};port.start();
};function boardCast(data) {portList.forEach(port => port.postMessage(data));
}

pageA.html:

<body>
<input type="text" id="msg">
<button id="send">发送</button>
<script>if (!!window.SharedWorker) {let myWorker = new SharedWorker("worker.js");send.onclick = function () {let msg = document.getElementById("msg").valuemyWorker.port.postMessage(msg);}myWorker.port.start()} else {alert("当前浏览器不支持webworker!")}</script>
</body>

pageB.html:

<body>
收到了消息：<span id="text"></span>
<script>if (!!window.SharedWorker) {let myWorker = new SharedWorker("worker.js");myWorker.port.onmessage = function (e) {document.getElementById('text').innerText = e.data}myWorker.port.start()} else {alert("当前浏览器不支持webworker!")}</script>
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

5.BroadcastChannel

实现同源下浏览器不同窗口，Tab页，frame或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯。

pageA.html:

<body>
<input type="text" id="msg">
<button id="send">发送</button>
<script>let channel = new BroadcastChannel('BroadcastChannel-test')send.onclick = function () {let msg = document.getElementById("msg").valuechannel.postMessage(msg)}</script>
</body>

pageB.html:

<body>
收到了消息：<span id="text"></span>
<script>let channel = new BroadcastChannel("BroadcastChannel-test")channel.addEventListener("message", function (e) {document.getElementById('text').innerText = e.data})</script>
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API

6.MessageChannel

创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。常见场景iframe通信。

pageA.html:

<body>
<input type="text" id="msg">
<button id="send">发送</button>
<p>收到iframe消息：<span id="text"></span></p>
<iframe src="pageB.html" width='640' height='320'></iframe>
<script>let iframe = document.querySelector('iframe');send.onclick = function () {let channel = new MessageChannel();channel.port1.onmessage = onMessagelet msg = document.getElementById("msg").valueiframe.contentWindow.postMessage(msg, '*', [channel.port2]);}function onMessage(e) {document.getElementById('text').innerHTML = e.data}</script>
</body>

pageB.html:

<body>
<input type="text" id="msg">
<button id="send">发送</button>
<p>收到main消息：<span id="text"></span></p>
<script>window.addEventListener('message', onMessage);let port = nullfunction onMessage(e) {document.getElementById('text').innerHTML = e.data;port = e.ports[0]}send.onclick = function () {let msg = document.getElementById("msg").valueif (port)port.postMessage(msg);}</script>
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MessageChannel

» 总结

窗口通信的方式有多种，大部分都是同源的，跨域通信可能要通过WebSocket，iframe等来解决。另外有些还有浏览器兼容性的问题，使用时需谨慎。

如有问题，欢迎指出。