两个浏览器窗口间通信(最佳实践)
通信分为同源和非同源两类
同源
自定义事件（不同窗口无效）
消息发送页
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)});
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 Woker
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
其他窗口的一个引用，比如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); }
还有大佬总结的非常好，可以参考下：
https://blog.csdn.net/u012397879/article/details/89321223?ops_request_misc=&request_id=&biz_id=102&utm_term=%E4%B8%8D%E5%90%8C%E7%AA%97%E5%8F%A3%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-89321223.142^v73^pc_search_v2,201^v4^add_ask,239^v2^insert_chatgpt&spm=1018.2226.3001.4187
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！