html-.-iframeadaptive height_html/css_WEB-ITnose の小さな蓄積

システムフレームワークを作成する場合、iframe 内に垂直スクロールバーを表示できないという要件がある場合、読み込まれたページの高さに応じて一貫して拡張する必要がある場合、iframe の高さの調整が問題になります。かなり面倒で、長い間悩みました。

オプション 1: iframe にネストされたページ (以下、内部ページと呼びます) に遭遇した場合、最初の読み込み時にのみ調整する必要がある場合は、内部ページの高さは変更されません。 iframe 、Google と互換性があります。

例:

オプション 2: iframe の高さを初めてロードした後も、内部ページの高さは依然として変化します。この時点では、内部ページの高さをリアルタイムで監視するしか方法がありません。内部ページが変更されたら、js を通じて iframe の高さをリセットします。

function setHeight() {

var iframe = document.getElementById("iframe_content");

try {

var aHeight = iframe.contentWindow.document.body.scrollHeight;
var bHeight = iframe.contentWindow.document .documentElement.scrollHeight;
var height = Math.min(aHeight, bHeight);//最高値を取得;
iframe.height = height;
} catch (e) {}
}
window .setInterval("setHeight() ", 200);

概要: 実際、オプション 1 の原理は、内側のページを読み込むときに高さを計算し、その後 iframe の高さを設定することです。オプション 2 は、内部ページを監視してから iframe の高さを設定することです。もちろん、できる限り iframe を使用しないことをお勧めします。より良い iframe 適応高さソリューションがある場合は、メッセージを残してコミュニケーションを取り、一緒に進歩してください。