2

ブラウザのタブ/ウィンドウ間でイベントベースの通信を行うことはできますか?

ローカルストレージを使用して（少なくとも理論的には）可能であることはわかっていました。それを行うコードの小さな例を教えてください。あるタブでイベントを送信し、別のタブで受信するだけです。

それを行うライブラリ/jquery-pluginsはありますか?

（Cookieを使用して同じブラウザのウィンドウ/タブ間で通信できることは知っていますが、それは私が必要とするものではありません。イベントベースのアプローチを好むので、ミリ秒ごとにCookieの状態を再確認したくありません）。

4

2 に答える 2

6

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>

HTML 5 仕様では、イベントで渡されるすべての情報について説明しています。

[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

このイベントを使用すると、ローカル ストレージ内の特定のキーが更新されたときに、他のページが反応するようにすることができます。

于 2013-02-09T22:09:36.550 に答える
0

SignalRampにチャンスを与えてください。

バインド可能なクラス名を要素にアタッチして、対応するマウスダウン、マウスアップ、ホバー (マウスオーバー、マウスアウト)、または UI のクリック イベントを同期できます。

于 2013-02-06T21:20:09.683 に答える