选项卡或窗口之间的通信

Question

选项卡或窗口之间的通信

我在寻找一种在浏览器中(在同一域中，而不是在CORS)中如何在多个选项卡或窗口之间进行通信而不留下痕迹的方法。有几种解决办法：

1. 使用窗口对象

2. 后讯息

3. 曲奇饼

4. 局部存储

第一种可能是最糟糕的解决方案-您需要从当前的窗口打开一个窗口，然后您只能在打开窗口的情况下才能进行通信。如果在任何窗口中重新加载页面，则很可能会丢失通信。

第二种方法，使用PostMessage，可能支持跨源通信，但与第一种方法有相同的问题。您需要维护一个窗口对象。

第三种方法是使用cookie将一些数据存储在浏览器中，这样看起来就像向同一域中的所有窗口发送消息一样，但问题是，在清理之前，您永远无法知道所有选项卡是否已经读取了“消息”。您必须实现某种超时才能定期读取cookie。此外，您还受到最大Cookie长度的限制，最大Cookie长度为4KB。

第四种解决方案，使用localStorage，似乎克服了cookie的局限性，甚至可以监听-使用事件。如何使用它是在被接受的答案中描述的。

编辑2018：公认的答案仍然有效，但是对于现代浏览器来说，使用BroadCastChannel还有一个新的解决方案。有关一个简单的示例，请参见另一个答案，该示例描述了如何使用BroadCastChannel在制表符之间轻松地传输消息。

Answer 1

有一个现代化的API专门用于这个目的-广播频道它就像：var bc = new BroadcastChannel('test_channel');bc.postMessage('This is a test message.');  /* send */bc.onmessage = function (ev) { console.log(ev); } /* receive */消息不需要仅仅是DOMString，任何类型的对象都可以发送。也许，除了API的清洁性之外，这也是这个API的主要好处-没有对象字符串化。目前支撑仅在Chrome和Firefox中，但您可以找到使用localStorage的多填充。