問題タブ [cross-window-scripting]

.data()jQuery関数を使用して情報を保存する Web アプリを更新しようとしています。この更新には、同じページで div だけを使用するのではなく、さまざまな種類の情報に個別のウィンドウが表示されるように、インターフェイスをリファクタリングすることが含まれます。一部のプラグインの動作方法が原因で、プラグインを呼び出すコードが別のウィンドウに移動され、必要なウィンドウで実行されるようになりました。ただし、これらのプラグインで使用されるコールバックの多くは、.data()保存された情報を見つけるために使用されますが、保存されたデータを設定するコード.data()は親ウィンドウにあり、データを DOM にアタッチするようには見えず、アタッチされた場所に保存します。そのため、子ウィンドウでは、コールバックは探しているデータを見つけることができなくなります。

を使用して動作しcall(parent, DOMelement.data);ますか? そして、これに対処するためのより適切な方法はありますか?

前もって感謝します！

通常、次のようなコード:

で foo が定義されていなくても、エラーは発生しませんx。

ただし、IE (Chrome や Firefox ではない) では、作成されたウィンドウとは別のウィンドウのコードから呼び出された場合、「delete x.foo; SCRIPT438 :オブジェクトはこのプロパティまたはメソッドをサポートしていません」というエラーがスローされます (プロパティがサポートされていない場合)。存在しません。(存在する場合は正常に動作します)。xfoo

HTML ファイルに保存して自分で実行できるテスト コードを次に示します。

(ウィンドウ 1 と 2 の両方で [ブロックされたコンテンツを許可] をクリックする必要があります)。

fooウィンドウ 1 では、任意の順序で何度でも設定または削除できることに注意してください。ただし、Window 2 で設定前に削除しようとしたり、2 回続けて削除しようとすると、すぐにエラーが発生します (IE 11 の場合)。

私の質問は、

(a) この行動の根本的な原因は何か、そして

(b) これはどこかに文書化されていますか? (見つからなかったので)。

（また、この奇妙な動作を文書化したスタックオーバーフローのエントリは、診断が難しいバグを引き起こしている可能性がある人々を助けるかもしれません... :-) ）

Webページで次のことを達成しようとしています:

• ユーザーはページの複数のタブ/ウィンドウを開くことができます。
• 数秒ごとに、コードの特定のセクション (重要な領域) を実行するには、これらのタブ/ウィンドウのいずれかが必要です。
• どのタブ/ウィンドウがコードを実行するかは気にしません。つまり、ソリューションの公平性や飢餓特性について心配する必要はありません。
• ユーザーが自分でタブ/ウィンドウを開いたので、ページのさまざまなインスタンスは、相互に認識していないか、直接参照していません (つまり、window.parent などはありません)。
• Flash、Silverlight、またはその他のプラグインを要求したくありません。すべてをクライアント側で実行する必要があるため、タブ/ウィンドウが通信できる方法は非常に限られています (これまでに見つけたのはLocalStorageだけですが、他の人になる）。
• タブ/ウィンドウのいずれかがいつでもクラッシュしたり、閉じたり、更新されたりする可能性があり、さらに多くのタブ/ウィンドウをいつでも開くことができます。数秒。
• これは、モバイル ( caniuse -rating %90 以上)を含む、できるだけ多くのブラウザーで確実に実行する必要があります。

私が最初に試みた解決策は、LocalStorage を共有メモリとして使用する単純な相互排除アルゴリズムを使用することでした。さまざまな理由から、 Burns と Lynch の論文「Mutual Exclusion Using Indivisible Reads and Writes」 (4 ページ (836))から相互排除アルゴリズムを選択しました。

私はjsfiddle (以下のコードを参照)を作成してアイデアを試してみましたが、Firefox で美しく動作します。試してみたい場合は、Firefox の複数 (最大 20) のウィンドウでフィドルへのリンクを開き、そのうちの 1 つだけが毎秒オレンジ色に点滅するのを確認してください。同時に複数のまばたきが見られる場合は、お知らせください。:) (注: フィドルで ID を割り当てる方法は少し安っぽく (0..19 をループするだけ)、すべてのウィンドウに異なる ID が割り当てられている場合にのみ機能します。2 つのウィンドウに同じ ID が表示されている場合は、単純に1 つをリロードします。)

残念ながら、Chrome、特に Internet Explorer では、意図したとおりに動作しません (複数のウィンドウが点滅します)。これは、あるタブ/ウィンドウから別のタブ/ウィンドウへの LocalStorage に書き込むデータの伝播の遅延によるものだと思います (これに関する私の質問はこちらを参照してください)。

したがって、基本的には、遅延データを処理できる別のミューテックス アルゴリズムを見つける必要があります (難しい/不可能に聞こえます)、またはまったく別のアプローチを見つける必要があります。たぶん、StorageEventsが役に立ちますか? それとも、LocalStorage を使用しない別のメカニズムがあるのでしょうか?

完全を期すために、フィドルのコードを次に示します。

チェックアウト カードの支払いプロバイダーによって 3D セキュア認証が完了した後、リダイレクトページと通信する必要があります。親ウィンドウの場所を変更したくないので、このような設定をしています

/payment.tsx

これは、3DS Auth URL への新しいウィンドウを開くページです

次のページ/redirectは、成功または失敗後に 3DS が戻る場所です。

これの目的は、Checkout 3DS が完了してアプリケーションに戻ると、/payment にメッセージを送信して /redirect ウィンドウを閉じることです。このセットアップは実行可能なアプローチではない可能性があるため、フィードバックを歓迎します。しかし、現時点では /redirect から送信されたメッセージを取得できないか、ウィンドウを閉じることができません。

サンプルコードはCodeSandboxにあります