是否可以在浏览器窗口之间进行基于事件的通信？ [英] Is it possible to have event-based communication between browser windows?

问题描述

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

Is it possible to have event-based communication between browser tabs/windows?

我知道它可能是（至少理论上） ）可以使用本地存储。能否请您提供代码的小例子？只需在一个标签中发送事件，然后在另一个标签中发送。

I known that it could be (at least theoretically) possible using local storage. Could you please provide small example of code doing that? Just send event in one tab, and receive it in another.

是否有任何库/ jquery-plugins可以做到这一点？

Are there any libraries/jquery-plugins that do that?

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

(I know that I can communicate between windows/tabs of the same browser using cookies; but that is not what I need; I would prefer event-based approach, I don't want recheck the state of the cookies every millisecond).

推荐答案

Localstorage具有您可以订阅以同步其他页面的事件。

Localstorage has events that you can subscribe to to syncronize other pages.

注意：如果更新窗口A中的键值，则事件将在窗口A中触发 。它将在窗口B&触发器中触发。 C.

Note: If you update a key's value in window A, the event will not be triggered in window A. It will be triggered in windows B & C.

这是一个演示：
http ：//html5demos.com/storage-events

在多个标签页中打开此页面。更改输入上的值并将其反映在div中。

Open this page in several tabs. change the value on the input and see it reflected in divs.

这是代码Javascript：

Here is the code The 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>

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

The HTML 5 spec discusses all the information passed in the event:

[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

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

Using this event, you can make other pages react to when a specific key in local storage is updated.

这篇关于是否可以在浏览器窗口之间进行基于事件的通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！