是否可能在浏览器窗口之间进行基于事件的通信？[副本]

Question

是否可以在浏览器选项卡/窗口之间进行基于事件的通信？

我知道使用本地存储是可能的（至少在理论上）。你能提供一个这样做的代码的小例子吗？只需在一个选项卡中发送事件，然后在另一个选项卡中接收它。

有什么库/jQuery-plugins可以做到这一点吗？

（我知道我可以使用Cookie在同一浏览器的窗口/选项卡之间进行通信；但这不是我需要的；我更喜欢基于事件的方法，我不想每隔一毫秒就重新检查Cookie的状态）。

Answer 1

给信号坡道一个机会。

您可以将任何可绑定的类名附加到元素以同步UI中相应的mousedown、mouseup、hover（mouseover,mouseout）或click事件。

Answer 2

Localstorage有一些事件，您可以订阅这些事件来同步其他页面。

注意：如果您在窗口a中更新键的值，该事件将不会在窗口a中触发。它将在窗口B和C中触发。

下面是一个演示:http://html5demos.com/storage-events

在多个选项卡中打开此页。更改输入上的值并在div中看到它的反映。

下面是JavaScript的代码：

var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent');

// handle updates to the storage-event-test  key in other windows
addEvent(window, 'storage', function (event) {
  if (event.key == 'storage-event-test') {
    output.innerHTML = event.newValue;
  }
});

// Update the storage-event-test key when the value on the input is changed
addEvent(dataInput, 'keyup', function () {
  localStorage.setItem('storage-event-test', this.value);
});

标记：

<div>
      <p>Your test data: <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this is only echoed on <em>other</em> windows)</small></p>
      <p id="fromEvent">Waiting for data via <code>storage</code> event...</p>
</div>

HTML5规范讨论了事件中传递的所有信息：

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

dictionary StorageEventInit : EventInit {
  DOMString key;
  DOMString? oldValue;
  DOMString? newValue;
  DOMString url;
  Storage? storageArea;
};

来源:http://www.w3.org/tr/webstorage/#the-storage-event

使用此事件，可以使其他页在本地存储中的特定键更新时作出反应。