6 种浏览器跨窗口通信方案 - 从实际案例出发

6种浏览器跨窗口通信方案

在浏览器环境中，跨窗口通信是一个常见的需求，特别是在需要在新窗口中处理某些操作后，将结果或指令传回主窗口的场景中。以下是六种实现浏览器跨窗口通信的方案，结合实际案例进行说明。

1. window.opener

• 原理：window.opener属性引用的是打开当前窗口的那个窗口对象。通过该属性，可以在新窗口中访问并打开它的父窗口，从而实现跨窗口通信。
• 实现步骤：

  列表页设置刷新列表方法，如window.refreshList = () => {}。

  列表页通过window.open或带有rel="opener"属性的<a>标签打开新增功能页面。

  新增功能页面完成操作后，通过window.opener.refreshList()方法刷新列表页面数据，并关闭当前页。

• 注意事项：

  a标签中需要设置rel="opener"属性，否则新页面的window.opener对象会为空。

  window.open默认情况下rel=opener，但打开第三方未知网站时，建议设置为noopener以提高安全性。

2. BroadcastChannel

• 原理：BroadcastChannel API允许在同一域名下的多个窗口、标签页或iframe之间进行实时消息广播。
• 实现步骤：

  列表页创建一个BroadcastChannel实例，并监听message事件。

  新增功能页面同样创建一个BroadcastChannel实例，频道名称与列表页一致，并通过postMessage方法发送消息。

• 优势：使用简单，适用于同一域名下的多个窗口间的实时通信。

3. postMessage

• 原理：postMessage方法允许在不同窗口、iframe或Web Worker之间发送数据，核心在于能获取目标窗口的window对象。
• 实现步骤：

  列表页打开新窗口，并监听message事件。

  新增功能页面使用window.opener.postMessage发送消息给列表页。

• 优势：可以跨域通信，适用于更复杂的场景。

4. MessageChannel

• 原理：MessageChannel API创建一个新的消息通道，通过它的两个MessagePort实例属性发送数据。它也可以跨域通信。
• 实现步骤：

  列表页初始化MessageChannel实例，并在port1上监听message事件。

  新增功能页面使用window.opener.messageChannel获取列表页的MessageChannel实例，并通过port2的postMessage方法发送消息。

• 注意事项：如果MessagePort对象使用addEventListener监听message事件，需要调用port.start()方法；使用onmessage则不需要。

5. storage事件

• 原理：当localStorage或sessionStorage被修改时，将触发storage事件。利用这个机制，可以完成跨窗口通信。
• 实现步骤：

  列表页监听storage事件，判断是否是对应key值发生变化。

  新增功能页面使用localStorage.setItem来触发列表页的storage事件。

• 注意事项：

  sessionStorage不能用于跨窗口通信，因为它在同一窗口下的不同页面或iframe间才有效。

  当前页的setItem不会触发当前页的storage事件，只会触发其他窗口的。

6. SharedWorker

• 原理：SharedWorker是Web Workers API的一种扩展，它允许在多个浏览器上下文中（如多个页面或多个iframe）共享一个Worker。
• 实现步骤：

  编写一个worker.js脚本，处理来自不同窗口的消息并广播给所有连接的端口。

  列表页和新增功能页面分别创建SharedWorker实例，并监听message事件。

  新增功能页面通过postMessage发送消息给worker，worker再将消息广播给所有连接的端口。

• 优势：适用于需要在多个窗口间共享数据或逻辑的场景。

总结

上述方案各有优缺点，选择哪种方案取决于具体的应用场景和需求。对于简单的跨窗口通信，如本案例中的通知列表页刷新数据，推荐使用window.opener或BroadcastChannel，因为它们使用简单且符合业务场景。对于更复杂或需要跨域通信的场景，可以考虑使用postMessage、MessageChannel或SharedWorker。