两个浏览器窗口之间通信(最佳实践)

jsPao

已于 2023-10-30 22:29:21 修改

阅读量901

点赞数 1

文章标签：前端 javascript

于 2023-03-10 16:05:54 首次发布

本文链接：https://blog.csdn.net/array__/article/details/129440517

版权

通信分为同源和非同源两类

同源

自定义事件（不同窗口无效）

消息发送页
new Even("specialData")
window.dispach("specialData", obj)

消息接收页
window.addEventListener("specialData", function(e) {console.log(e)});

监听localStorage

消息发送页
localStorage.setItem('message',JSON.stringify({message: '消息'，from: 'Page 1'}))

消息接收页
window.addEventListener("storage", function(e) {console.log(e.key, e.newValue, e.oldValue)});
或者window.onstorage

BroadcastChannel

消息发送页
const channel = new BroadcastChannel('example-channel');
channel.postMessage(object);

消息接收页
const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
received.textContent = event.data;
});
channel.addEventListener('messageerror', (event) => {
console.error(event);
});
或者
const channel = new BroadcastChannel('example-channel');
channel.onmessage = (event) => {
received.textContent = event.data;
};
channel.onmessageerror = (event) => {
console.log(event);
};

// 当完成后，断开与频道的连接，告诉它不要再接收新的消息，并允许它最终被垃圾回收。

Service Worker

new Worker()

SharedWorker

HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。
Dedicated Worker直接使用new Worker()即可创建，这种webworker是当前页面专有的。
SharedWorker可以被多个window、标签页、iframe共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)。

非同源

document.domain

window.name（不同窗口无效）

这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。
window.name = data;
接着，子窗口跳回一个与主窗口同域的网址。
window.location.href = ' http://parent.url.com/xxx.html';
然后，主窗口就可以读取子窗口的window.name了。
var data = document.getElementById('iframe的id').contentWindow.name;

window.postMessage

仔细看 window.postMessage()，就注定了你首先得拿到window这个对象。也注定他使用的限制，两个窗体必须建立起联系。常见建立联系的方式：
window.open
window.opener
iframe
你能获得被打开窗体的句柄，当然也可以直接操作窗体了。

otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow：
你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window。其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message：
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。
targetOrigin：
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串" "（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer：（可选）
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

WebSocket

所有的WebSocket都监听同一个服务器地址，利用send发送消息，利用onmessage获取消息的变化，不仅能窗口，还能跨浏览器，兼容性最佳，只是需要消耗点服务器资源。
const ws = new WebSocket("ws://localhost:3000/") ws.onopen = function (event) { // 或者把此方法注册到其他事件中，即可与其他服务器通信 ws.send({now : Date.now()}); // 通过服务器中转消息 }; ws.onmessage = function (event) { // 消费消息console.log(event.data); }

还有大佬总结的非常好，可以参考下：

两个浏览器窗口间通信-CSDN博客