iframe適応高さ_Experience交換の各種方法まとめ

枠線のない iframe は Web ページとシームレスに統合できるため、ページを更新せずにページの一部のデータを更新することができますが、iframe のサイズはレイヤーほど「拡張性」がないため、問題が発生します。使用中です。問題が発生しました。iframe の高さを設定するとき、多すぎるのは良くありません。それより少ないとさらに良くありません。ここで、iframe の高さを動的に調整する方法、主に次の JS 関数を説明します:
まずはこの方法 コードがシンプルで互換性も問題ないので、まずはテストしてみても良いでしょう。

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

function SetWinHeight(obj) )
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument) && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win .Document.body.scrollHeight;
}
}
}

最後に、iframe を追加するときに、onload 属性を失うことはできません。もちろん、id も必要です。関数内の match win
>

コードをコピーします コードは次のとおりです:

div>
この種のコードは上記のソリューションに似ています
古典的なコード iFrame 適応高さは IE6/IE7/IE8 のテストに合格しています。 /Firefox/Opera/Chrome/Safari。
HTML コード:

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

iframe>JavaScript コード:

次のコードの方が互換性があります

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

別の iframe ソリューション (非常にシンプル)
重要なヒント: src= に入力する必要がある Web アドレスは、このページと同じサイトにある必要があります。そうでない場合は、エラーが発生し、「アクセスが拒否されました!」と言われます (実際には、これは Js のクロスドメインの問題によりアクセスが拒否されました)
私は以前にこの問題に遭遇したことがあります。答えを得るためにオンラインで検索したところ、多くの人も同じように遭遇していることがわかりました。この問題は解決策を共有します。
1.bottom.js ファイルを作成し、次のコード (2 行のみ) を入力します。

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

parent.document.all("フレームID名").style.height=document. body.scrollHeight;
parent.document.all("フレーム ID 名").style.width=document.body.scrollWidth;

ここでのフレーム ID 名は Iframe の ID です。例:

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

2. Web サイトに含まれるすべてのファイルを提供します。

を追加します。 コードをコピー コードは次のとおりです:

div >
3. はい、もう終わりにしましょう。
WINXP および IE6 でのテストに合格しました。とても簡単です！
iframe の適応型高さを実装します。
iframe の適応型高さを実装します。これは、ページと iframe に同時にスクロール バーが表示される現象を回避するために、ページの長さに自動的に適応できます。

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

3 番目の方法はバッチ iframe 適応です:
仕事中、iframe に含まれるコンテンツに応じて iframe の高さが適応されるという問題に遭遇しました。インターネット上で同様の問題に対する解決策を見てきました。検索した結果、ブラウザと互換性のある比較的完全なソリューションを見つけたので、自分で記述する必要はありません。
自分で記述する必要はありませんが、この考え方は理解しておく必要があります。基本的には、iframe 属性 src で指定されたドキュメント内のコンテンツの高さを取得し、それを使用して、 iframe 自体の高さ。iframe が配置されているページが読み込まれると、ページの高さが変更されます。高さの調整が必要なすべての iframe が自動的に設定されるため、時間と労力が節約されます。ページ内のすべての iframe が適切であると判断された場合は、アダプティブハイトを必要とする場合は、iframe配列を直接取得してコードに与えるだけで、IDを自分で書く必要もなく、プログラムが完成します。 (コードを投稿します:)

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

インターネット上の誰かが、iframe に含まれるドキュメントの高さが動的に変化する場合に iframe の高さを自動的に調整する問題を解決する方法を改良しました。原理は継続的に行うことです。 iframe に含まれるドキュメントのコンテンツの高さをスキャンし、iframe が配置されているページで変更する iframe 自体の高さ この方法は問題を解決しているように見えますが、影響があるかどうかはわかりませんページの速度とシステム リソースの使用量についてですが、この方法は少し偏執的であると感じており、より良い解決策があるはずです。
既知の iframe ID のみを呼び出す 4 番目のメソッドは推奨されません

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

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document .body .scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

使用方法は、調整する必要がある iframe に ID を追加し、それからjsを実行するだけです