iframe 適応型高さと高さ変化のリアルタイム監視 js code_javascript スキル-jsチュートリアル-php.cn

Google N 回、Baidu M 回 1605 回テストした後 (非常に多くの実験の結果、殺虫剤 1605 が出てきたと聞きました)、IE7 と Firefox3 で試してみたところ、次の結果が得られました。
1. まず Iframe を与えます。

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

 
marginheight="0" <BR>marginwidth="0" <BR>height="100" <BR>width="1000" <BR>frameborder="0" <BR>scrolling="no" <BR> src=" xxxxx.html"> <br> 

2. 次に、Iframe でページの高さを取得する方法を確認します。
実際、最も難しいのは、取得の精度を高める方法です。異なる方法や異なるブラウザでは取得される値も異なります。めまい〜〜。多くの意見を参考にした結果、次の JavaScript 関数を思いつきました (doc パラメータは window.document オブジェクトです):

Copy code コードは次のとおりです。

 
function getDocHeight(doc) 
{ 
//IE では、doc.body.scrollHeight が最も信頼性が高くなります
// Firefox では、doc.height で十分です
var docHei = 0; 
varscrollHei;//scrollHeight 
var offsetHei;//offsetHeight、境界線の高さを含みます
if (doc.height) 
{ 
//Firefox はこの属性をサポートしますが、IE はサポートしません 
docHei = doc.height; 
} 
else if (doc.body) 
{ 
//IE では、body.scrollHeight のみが現在のページの高さに関連しています。
//他の値は何に基づいているのかわかりません。 
//それを含むウィンドウのサイズ変更に関係しているようです
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight 
if(doc.body.scrollHeight; ) docHei = スクロールヘイ = doc.body.scrollHeight; 
} 
else if(doc.documentElement) 
{ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if (doc.documentElement.scrollHeight) docHei =scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//最大値を取得します、場合によっては、以下の高さが実際のページの高さと一致しない可能性があります。 
*/ 
return docHei; 
} 

3. 最後に、Iframe の高さを変更し、タイマーを使用してそれに含まれるページの高さの変更を継続的に確認します。

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

 
function doReSize() 
{ 
var iframeWin = window.frames['ifrm']; 
var iframeEl = window.document.getElementById('ifrm'): document.all['ifrm']: null; 
if ( iframeEl && iframeWin ) 
{ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei ' px'; 
} 
else if(iframeEl) 
{ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style. height = docHei 'px'; 
} 
} 
function runResizeTask() 
{ 
doReSize() 
setTimeout("runResizeTask()",500);// 0.5 秒 1 回実行 
} 
runResizeTask(); 

含まれるページが折りたたまれているか、表示されているかどうかを考慮する必要はありません。
完全な js コード

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

人気のチュートリアル

詳細>