クロスドメイン値転送とは、メインページと iframe_javascript スキルの間で値を転送することを意味します

要件 1: メイン ページ A から iframe B にデータを転送するにはどうすればよいですか?

このように、メインページは iframe B にデータを渡す必要があり、iframe B はデータを取得した後に特定の処理を実行します

実装方法

重要なのは、location オブジェクトのハッシュ値を使用して、通信データを渡すことです。メイン ページ A の iframe B の src の後に追加の #data 文字列を設定するだけです (data は、渡したいデータです)。次の図に示すように、

その後、iframe B で、何らかのメソッドを介してここにあるデータを即座に取得できます。実際によく使用される方法は、

1 に設定します。 iframe B は setInterval メソッドを通じて、location.href の変更を監視して上記のデータ情報を取得します
2。その後、iframe B はこのデータ情報に基づいて対応する論理処理を実行できます

要件 2 : iframe B はどうですか? メイン ページ A にデータを渡すのはどうですか?

このように、iframe B はメインページにデータを渡す必要があり、メインページはデータを取得した後に特定の処理を実行します

実装方法

実装 秘訣は、プロキシ IframeC を使用することです。プロキシ IframeC は iframe B に埋め込まれており、メイン ページ A と同じドメインに存在する必要があります。その後、それを使用して、上記の最初の通信メソッドの実装原則を完全に利用して、 iframe B のデータを iframeC に送信する場合、次の問題は、以下の図に示すように、iframeC からメイン ページ A にデータを渡す方法です。

iframeC とメイン ページは同じドメインにあるため、さらに、ここでの方法は、頻繁に使用されるプロパティ window.top (window.parent.parent を使用することもできます) を使用することです。これは、ブラウザーにロードされたトップレベルのウィンドウ オブジェクトへの参照を返します。を直接使用できるようにします。メインページの A の方法です。ははは、簡単です。
この時点で、簡単な分析と要約を行います

この実装方法の前提と最大の欠点は、iframe 内のコンテンツが制御可能でなければならないことですが、少なくとも私たちの実装方法はこれはブラウザのセキュリティ ルールを超えており、アプリケーション自体のセキュリティを損なうものではありません。
実装中に考慮する必要があるいくつかの詳細

次のような使いやすさ、拡張性、保守性を考慮するようにしてください。

サードパーティ アプリには、当社が提供する JS シード ファイルは、当社が提供するさまざまなツールで簡単に使用できます
上記のさまざまなツールは、オンデマンドの読み込みを最大化するためにパッケージの形式でまとめられています
最初の記事の JS シード ファイルは提供するだけです基本的なメソッドの実装と、適応性の高い
などの最も一般的に使用されるツールキットを組み込みます。シード ファイルを通じて、一般的に使用されるいくつかの JS ツールキットもサードパーティ アプリに提供します。直接の使用は YUI3 と同様です。動的読み込みモジュールのメカニズムは、指定されたツールキット
を使用して、サードパーティのアプリとメイン ページによって渡されるデータ (自己呼び出し、ログイン検証、データ転送など) を分類できます
渡されるデータは、特定の仕様を満たし、統合サービス アウトレットを通じて送信されるメイン ページは、データを解析し、仕様に従って対応するメソッドを呼び出すための統合サービス インターフェイスを提供します。
また、バージョン管理の問題もあります。サードパーティ アプリへの影響を最小限に抑えるために、上記のすべての JS ファイルのバージョンは下位互換性戦略を採用しており、サーバーを使用して SQUID キャッシュの有効期限を特定の頻度で設定します。大規模なバージョンのアップデートは、ユーザー自身のニーズに応じて手動で変更されます
もちろん、上記が最善の解決策ではない可能性があります。私たちは、いくつかの実装方法も徐々に改善しています。バージョン管理など、解決すべき問題もいくつかあります。

特定のコード

メインページ A のソースコード

Source code of iframeB (iframePage.html)

Source code of iframeC (iframePageC.html)