要件 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 モジュールと同様の動的読み込みメカニズムを使用して直接使用できます。
サードパーティのアプリやメインページによって渡されるデータを分類します (自己呼び出し、ログイン検証、渡されるデータなど)。
転送されるデータは、特定の仕様を満たす JSON 形式を使用し、統合サービス アウトレットを通じて送信されます。メイン ページは、データを解析し、仕様に従って対応するメソッドを呼び出すための統合サービス インターフェイスを提供します。
バージョン管理の問題もあります。サードパーティ アプリへの影響を最小限に抑えるために、上記のすべての JS ファイルのバージョンは、サーバーを使用して有効期限を設定することによって実装されています。 SQUID キャッシュは特定の頻度で更新され、ユーザーのニーズに応じて手動で変更されます。
もちろん、上記は最適な解決策ではないかもしれませんが、バージョン管理などのいくつかの実装方法も徐々に改善しています。解決する必要がある問題もいくつかあります。 。
特定のコード
メインページAのソースコード
次のようにコードをコピーします。
JSコード
/*メインページA*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>メインページ A</title>
<script type="text/javascript">
関数 init(){
document.domain = 'bai.sohu.com';
alert('私はメイン フレームであり、サードパーティ アプリケーション IframeB が埋め込まれています。アプリケーションは以下で読み込みを開始します');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'ブロック';
};
関数コールバック(h){
var iframeB = document.getElementById('frameB');
alert('IframeC は (メイン フレーム) インターフェイスを呼び出し、IframeB の高さを渡します。具体的な値は次のとおりです: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p>私はホームページ フレームで、ドメインは bai.sohu.com です</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
iframeBのソースコード（iframePage.html）
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</head>
<body onload="init();">
<p style="height:500px;">私はサードパーティのアプリケーションであり、ドメインは test.com です</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<script type="text/javascript">
関数 init(){
alert('私はサードパーティ アプリです。メイン フレームと同じドメインに通信チャネル IframeC を作成し、その src を設定し、# 記号を使用して高さの値を渡しましょう');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'ブロック';
window.setTimeout(function(){
alert('メイン ページは、私の (IframeB) の src を設定し、ハッシュ (#) を通じて受け取った高さを渡します: ' + location.hash);
}、2000);
};
</script>
iframeCのソースコード（iframePageC.html）
次のようにコードをコピーします。
<script type="text/javascript">
document.domain = 'bai.sohu.com';
alert('I (IframeC) は、パラメーター (#) を介して高さの値を渡してくれる iframeB を受け取りました。今度は、メイン ページ メソッドを呼び出して IframeB の高さを設定します');
top.callback(window.location.href.split('#')[1]);
</script>