如何使用 JavaScript 在两个浏览器窗口间通信

使用JavaScript在两个浏览器窗口间通信主要靠以下几种技术：Window.postMessage()方法、Broadcast Channel API、LocalStorage以及SharedWorker。这些技术支持不同程度的数据交换和通信模式，从而实现两个窗口间的有效通信。Window.postMessage()方法是最直接也是最广泛使用的一种方式，其允许来自不同源的窗口进行安全的跨源通信。

一、WINDOW.POSTMESSAGE()方法

Window.postMessage()允许一个窗口向另一个窗口发送消息，无论这两个窗口是否同源。这是实现跨源通信的一种安全方式，因为它允许发送方指定消息的接收方，从而避免将数据暴露给不信任的源。

首先，发送消息的窗口需要获取接收消息窗口的引用，可以通过window.open()方法打开新窗口并获得其引用，或者如果是iframe内嵌页面，可以通过parent或frames属性来获得。然后，通过调用window.postMessage(message, targetOrigin)方法发送消息，其中message是要发送的数据，targetOrigin用于指定允许接收消息的窗口源（URL的协议、主机名和端口号），为了安全起见，推荐尽可能精确指定。

接收消息的窗口需要监听message事件来接收和处理消息。监听操作通过window.addEventListener('message', function(event) {...})实现。在事件处理函数中，可以通过event.origin属性检查发送消息的窗口源，以确保消息的来源是预期的安全源。另外，event.data属性包含发送的消息数据。

二、BROADCAST CHANNEL API

Broadcast Channel API 使得同源的不同窗口、标签页、iframe或者其他浏览器上下文能够通过同一个频道进行简单的通信。它允许我们创建一个通信信道，任何加入该信道的窗口都可以接收到通过该信道发送的消息。

要使用Broadcast Channel API，首先需要创建一个新的BroadcastChannel对象，并为其指定一个频道名。所有希望通过这个频道通信的窗口都需要使用相同的频道名创建BroadcastChannel对象。一旦加入频道，就可以使用postMessage方法发送消息到信道，所有监听该信道的窗口都会接收到这个消息。

接收消息方通过监听message事件来接收消息。事件监听可以使用addEventListener方法在BroadcastChannel对象上注册。处理函数将接收到一个事件对象，该对象的data属性包含了发送的消息内容。

三、LOCALSTORAGE

LocalStorage提供的是一种存储键值对的方法，它允许在同一浏览器上的不同窗口间共享数据。虽然LocalStorage不是直接的通信机制，但可以被用来实现窗口间的消息传递。

当LocalStorage中的数据发生变化时，会触发storage事件，其他页面可以通过监听这个事件来得知数据的变化，从而实现间接的通信。重要的是要注意，这种方法只适用于同源的页面间通信。

为了使用LocalStorage进行通信，一个窗口可以通过localStorage.setItem(key, value)来存储数据，而其他窗口则可以通过监听window.addEventListener('storage', callback)来观察数据的变化并做出响应。storage事件的事件对象包含了关于变化的数据项的详细信息，比如key、newValue等。

四、SHAREDWORKER

SharedWorker 是一种可以被多个脚本和浏览器上下文共享的Web Workers。这意味着不同的浏览器窗口、标签页或者iframe等可以通过共享的Worker来通信。

要使用SharedWorker进行通信，首先需要创建一个SharedWorker对象并指向一个JavaScript文件。这个文件包含了Worker的代码，负责管理各个连接到这个Worker的窗口间的通信。各个窗口可以通过创建的SharedWorker对象与Worker通信，并且可以通过它与其他窗口交换消息。

共享Worker内部使用onconnect事件来响应新的连接。对于每一个连接，它可以通过event.ports[0]获取到一个MessagePort对象，这个对象可以用来与对应窗口进行消息传送。窗口通过监听message事件并使用postMessage方法发送消息来与SharedWorker进行交互。

总结

JavaScript提供了多种在两个浏览器窗口间通信的方法，每种技术都有其适用场景。Window.postMessage()方法提供了一种安全的方式来进行跨源通信，Broadcast Channel API适合于同源窗口间的简单通信，LocalStorage虽然不直接用于通信但可以实现这一功能，而SharedWorker则可以在多个窗口间共享一个工作线程来进行通信。开发者应根据实际需求选择最合适的通信方式。

相关问答FAQs：

1. 我如何使用 JavaScript 在两个浏览器窗口间建立实时通信？
   在 JavaScript 中，你可以使用 window.postMessage() 方法来实现两个浏览器窗口间的实时通信。通过这个方法，你可以在一个窗口中发送消息，并在另一个窗口中监听并处理这些消息。这种通信方式非常适合用于Web应用程序中的多窗口协作，比如聊天应用或多人协同编辑器。

2. 当我使用 window.postMessage() 进行跨窗口通信时有什么安全性考虑？
   在使用 window.postMessage() 进行跨窗口通信时，你需要确保只接收来自预期的窗口的消息，以防止恶意代码的注入和攻击。一种常见的做法是在消息中附加一个标识符，以确保消息是从预期窗口发送的。此外，你还可以使用 origin 属性来验证消息的来源，确保消息来自预期的域名。

3. 是否可以在两个不同域的浏览器窗口间进行通信？
   在默认情况下，不同域的页面是不能直接通过 window.postMessage() 方法进行通信的。这是出于安全考虑的。然而，你可以通过在两个窗口中都嵌入同一个共享的外部脚本来实现跨域通信，这被称为跨文档通信。具体来说，你可以使用 iframe 和 window.postMessage() 结合起来实现这种通信方式。当然，在实现跨域通信时，你仍然需要注意安全性方面的考虑，以防止跨域攻击。