クロスドメイン状況で iframe の高さに適応する利用可能なメソッドを設定する方法_JavaScript スキル

ページ上で iframe を使用してページ コンテンツを動的に読み込むことは、Web 開発では一般的な方法です。親ページにスクロールバーのない iframe を指定し、src 属性に読み込み可能なページを指定すると、親ページにアクセスしたときに子ページが自動的に読み込まれるようになります。 iframe の高さは、サブページの実際の高さに応じて調整する必要があります。 iframe の高さが実際のサブページの高さよりも小さい場合、余分な部分は表示できません。逆に、iframe の高さが高すぎる場合、ページ内に多くの空白が表示されます。サブページのコンテンツの高さが不明な場合は、属性または CSS を使用して iframe の高さを設定でき、スクリプトを使用して動的に指定することもできます。しかし、サブページが同じドメインにない場合はどうなるでしょうか?現時点では、スクリプトにはサブページの高さを取得する方法がなく、JavaScript のクロスドメインの問題が発生しています。

タイトルにもありますが、この記事では利用可能な方法を紹介しつつ、以下に挙げた方法以外にも方法はあるのか？

属性または CSS を使用した iframe の高さの設定については、ここでは詳しく説明しません。まず、スクリプトを使用して設定する方法を見てみましょう。

コードをコピー コードは次のとおりです。

function ChangeFrameHeight(id) {
var count = 1;

(function() {
var frm = document.getElementById(id);
var subWeb = document.frames ? document.frames[id].document : frm. contentDocument;

if (subWeb != null) {
var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight); >}
if (count count = count 1; window.setTimeout(arguments.callee, 2000);



iframe サブページと親ページが両方とも同じドメイン内にあると仮定すると、このスクリプトは、指定された ID の iframe の高さを動的に調整できます。親ページが子ページより先に読み込まれるのを防ぐため、この関数は 2 秒ごとに合計 3 回再実行されます。極端な場合には、サブページの読み込み速度が親ページの読み込み速度よりも遅くなる場合があるため、実行回数と時間を適切に調整できます。

コードをコピー

コードは次のとおりです:


HTML5 の postMessage() メソッドの使用方法については、http://dev.w3.org/html5/postmsg/#web-messaging の記事を参照してください。

しかし、ほとんどの場合、 iframe 参照されたサブページが親ページと同じドメインにないという事実に加えて、サブページで操作をまったく実行できないか、サブページが Corss ドキュメント メッセージング機能を提供していない可能性があります。全て。この場合、サブページに関する情報は postMessage() メソッドを通じて取得できません。サブページと対話する方法がないため、サブページのドキュメント オブジェクトを知る方法がありません。サブページの実際の高さに基づいて親ページの iframe の高さ属性を調整することはできませんでした。

現時点では、上記の問題に対処する他の実用的かつ効果的な方法はありません。デフォルトでは、iframe の高さを比較的大きく指定できます。このように、参照先のサブページのコンテンツが範囲を超えないことを前提として、コンテンツの表示には多少の空白スペースを残す以外は基本的に問題ありません。ページ。

他にもっと効果的な解決策はありますか?期待する！