JavaScript;同じオリジンのタブ/ウィンドウ間の通信[重複

StackOverflow https://stackoverflow.com/questions/2236828

質問

この質問にはすでに答えがあります：

ウィンドウAとウィンドウBの2つのウィンドウがあります。

  • ウィンドウAとウィンドウBには同じドメインがあります
  • ウィンドウAとウィンドウBには親のウィンドウがありません。

質問：

  1. ウィンドウAがウィンドウBの参照を取得することは可能ですか？
  2. ウィンドウAがウィンドウBに通知する最もエレガントな方法は何ですか？
    （新しいHTML5仕様を含む）

私がこれを行うことを認識している2つの方法：

  • サーバーによるメッセージング：ウィンドウBレギュラリーがサーバーに何かを通知した場合、サーバーに尋ねる場所
  • ローカルデータによるメッセージ（html5）：ウィンドウAが何かを通知したい場合、ローカルデータが変更された場合、ウィンドウBレギュラリーはローカルデータに変更をチェックします。

しかし、2つの方法はそれほどエレガントではありません。
たとえば、ウィンドウBの参照を取得してwindow.postmessage（）（html5）を使用するといいでしょう

究極の目標は、Facebookのようなものを作成することです。ここで、4つのFacebookタブを開き、1つのタブでチャットすると、すべてのFacebookタブでチャットが最新です。

役に立ちましたか？

解決

私は質問で言及されている共有ローカルデータソリューションに固執しています localStorage. 。信頼性、パフォーマンス、ブラウザの互換性の点で最良のソリューションのようです。

localStorage すべての最新のブラウザに実装されています。

storage イベントはいつですか 他の タブは変更を加えます localStorage. 。これは、コミュニケーションの目的で非常に便利です。

参照はこちらにあります：
ウェブストラージ
WebStorage-ストレージイベント

他のヒント

BroadcastChannel標準では、これを行うことができます。現在、FirefoxとChromeに実装されています（使ってもいいですか, MDN):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

共有ワーカーは、タブ間で通信できる一般的なプロセスのWhatWG/ HTML5仕様です。

あなたはあなたに言った：

Utlimateの目標は、Facebookのようなものを作成することです。4つのFacebookタブを開き、1つのタブでチャットすると、すべてのFacebookタブでチャットが実現します。

これは、デザインの副産物として、クロスビュー通信でデザインする必要があるのではなく、チャットの更新のためにモデル（おそらくサーバー）を照会するビュー（おそらくサーバー）として発生するはずです。膨大な量のデータを転送することを扱っていない限り、なぜそれについて心配するのですか？大きな利益なしに物事を複雑にするようです。

数年前、私がやったなら、私はそれを見つけました window.open 既存のウィンドウの名前と空白のURLを使用して、既存のウィンドウへの参照を取得しました（この動作は均等です MDCに文書化されています コメント MSDNドキュメント IEでも機能することを示唆しています）。しかし、それは何年も前のことですが、今日の世界でそれに対するサポートがどれほど普遍的であるかはわかりません。もちろん、すべてのウィンドウが含まれていない限り、あなたは探すべきウィンドウ名を持っていません iframe サーバー側のコードを介してユニークに名前が付けられ、サーバー側のコードによって他のウィンドウに通信される通信の場合...（怖い考え：実際に実行可能かもしれません。記録に関連する「現在の」ウィンドウ名を保存します - テーブルのアカウントで、そのアカウントにログに記録する新しいウィンドウにリストを指定し、古い非アクティブなエントリをullします。しかし、リストが少し古くなっている場合は、他の人を検索するときに新しいウィンドウを開きます...そして私はBETサポートは、ブラウザからブラウザまでです。）

今後のことに加えて 共有ワーカー, 、使用することもできます クロスドキュメントメッセージング, 、これははるかに広くです サポート. 。このシナリオでは、他のすべてのウィンドウを開くのを担当するメインウィンドウがある必要があります window.open. 。その後、子の窓を使用できます ポストメサージ 彼らに window.opener.

フラッシュを使用することがあなたのためのオプションである場合、はるかに古いものもあります LocalConnection フラッシュがインストールされているクライアントで事実上サポートされています（例コード).

その他のフォールバック方法：
windocation.location.href with with with jquery用のポストメサージプラグイン
非インスタント通信のためのCookieベースのソリューション

Afaik、同じ親を持っていない場合、Windows間で通信することは不可能です。

両者が親のウィンドウから開かれた場合、親の変数参照を手に入れることができるはずです。

親に、このような窓を開きます。

childA = window.open(...);
childB = window.open(...)

Childaでは、このような子育てにアクセスしてください：

childB = window.opener.childA

I have a neat way to do such trick, but with restrictions: you should allow popups for your domain and you will get one page always opened (as tab or as popup) which will implement communications between windows.

Here's an example: http://test.gwpanel.org/test/page_one.html (refresh page after enabling popups for domain)

The main feature of this trick - popup is being opened with url fragment '#' in the end, this force browser to don't change window location and store all the data. And window.postMessage do the rest.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top