web-dev-qa-db-ja.com

新しいブラウザーの複数のブラウザータブとクライアントの状態に対処するオープンソースのJavaScriptライブラリはありますか?

タブ、ブラウザーウィンドウ、同じドメインウィンドウなどの間で状態を共有できる最近のブラウザーに組み込まれたいくつかの新しいHTML5機能があります。そのため、クライアントおよびタブやウィンドウ間の状態をインテリジェントに管理します。

現在、単一のタブまたは単一のウィンドウで状態を管理するのに役立つBackbone.jsなどのライブラリがあります。サーバーに依存せずにグローバル状態、タブ固有の状態、およびクロスタブイベントを管理する複数のタブ(またはウィンドウ)に役立つものはまだありますか?

11
psr

短い答え:

trulyあるタブから別のタブに状態情報を渡すことはできません...

長い答え:

trulyあるタブから別のタブに状態情報を渡すことはできません。これはサンドボックス化とセキュリティの非常に重大な違反になるためです。

ただし、次の方法で2つのタブ間で間接的に状態を渡すことができます。

別のオプションは、単に2つのタブ間で情報を渡すためにCookieを介して通信することですが、これは問題を引き起こす可能性が高く、ブラウザー依存性が高く、ページのリロードが必要ですそれを考えたが、他の人は doneitを持っている。

したがって、ブラウザ拡張は明らかにかなり限定的なパスであるため、クライアント/サーバー通信の方法を使用して、クライアントがサーバーにイベントを発行し、それらを再ディスパッチする(または他の種類のブロードキャスト)システムを開発する必要があります。選択した通信プロトコルを介して他のクライアントに。


更新1:コメントを削除する前に誰かが言及したように(受信トレイに表示されないため、クレジットを付与できません。申し訳ありません)

HTML5はwindow.postMessage AP​​Iを導入しています。

実際の例については、John Resigの Cross-Window Messaging に関するブログ投稿を参照してください。そして非常に興味深いことに、この投稿のコメントを見ると、誰かがMalteと呼ばれる library について言及していることがわかります最新のブラウザではwindow.postMessageを使用し、古いブラウザではCookieベースのバージョンを使用します。

詳細と例については、以下をお読みください。

更新2:

2012-03-04のように、HTML5仕様はまだ草案であるため、一部の機能を削除できることに注意してください。したがって、慎重に使用してください...

3
haylem

最近、ローカルストレージを使用してウィンドウ間のブロードキャストメッセージングを実装する Intercom を発見しました。ローカルストレージは、データが変更されるとイベント(onstorage)を発生させるため、ポーリングは必要ありません。インターコムでは、どのように開いたかに関係なく、ドメイン上のすべてのページが通信できます。

3
josh3736

ウィンドウ(ページ)が同じドメイン(起源)からのものである場合、localStorageを使用してデータを共有し、メッセージをブロードキャストできます。考慮すべき1つのことは、各ブラウザーウィンドウ(ページ)が個別のスレッドで動作することです。したがって、ウィンドウ間の通信について話している場合は、マルチスレッドについても話していることになります。

IEでのいくつかのlocalStorage問題も考慮する必要があります。

  • IE8でlocalStorageのテストをいくつか実行しました。 localStorageに数千の変更を加えた後、同じOriginのウィンドウは「ストレージ」イベントの受信を停止します。さらに、同じlocalStorageアイテムから読み取ろうとすると、ウィンドウによって値が異なる場合があります。つまり、IE8はlocalStorageをサポートしていないと思います

  • IE9およびIE10は、このウィンドウからlocalStorageが変更された場合でも「ストレージ」イベントハンドラーを呼び出します( これは仕様に反します )。

  • IE11の既知の問題 もあります。

私は最近 ウィンドウ間通信ライブラリ を公開しました(すべての機能はreadmeで説明されています)。スレッドセーフなデータ共有、イベントブロードキャストを提供します。また、いくつかのIE問題を解決します(IE8は確実にサポートされていません。異なるOrigin親内のiframeに関するIE11のバグはIE修正-IE11を待つことによってのみ解決できます。更新)。

1
Eugene Khudoy