ä»ä¹æ¯èªéåºé«åº¦å§ãæè°iframeèªéåºé«åº¦ï¼å°±æ¯ï¼åºäºçé¢ç¾è§å交äºçèèï¼éèäºiframeçborderåscrollbarï¼è®©äººçä¸åºå®æ¯ä¸ªiframeãå¦æiframeå§ç»è°ç¨åä¸ä¸ªåºå®é«åº¦ç页é¢ï¼æ们ç´æ¥åæ»iframeé«åº¦å°±å¯ä»¥äºãèå¦æiframeè¦åæ¢é¡µé¢ï¼æè
被å
å«é¡µé¢è¦åDOMå¨ææä½ï¼è¿æ¶åï¼å°±éè¦ç¨åºå»åæ¥iframeé«åº¦å被å
å«é¡µçå®é
é«åº¦äºã
顺便说ä¸ï¼iframeå¨è¿«ä¸å¾å·²çæ¶åæå»ç¨ï¼å®ä¼ç»å端å¼å带æ¥å¤ªå¤ç麻ç¦ã
ä¼ ç»åæ³å¤§è´æ两个ï¼
æ¹æ³ä¸ï¼å¨æ¯ä¸ªè¢«å
å«é¡µå¨æ¬èº«å
容å è½½å®æ¯ä¹åï¼æ§è¡JSåå¾æ¬é¡µé¢çé«åº¦ï¼ç¶åå»åæ¥ç¶é¡µé¢çiframeé«åº¦ã
æ¹æ³äºï¼å¨ä¸»é¡µé¢iframeçonloadäºä»¶ä¸æ§è¡JSï¼å»åå¾è¢«å
å«é¡µçé«åº¦å
容ï¼ç¶åå»åæ¥é«åº¦ã
å¨ä»£ç ç»´æ¤è§åº¦èèï¼æ¹æ³äºæ¯ä¼äºæ¹æ³ä¸çï¼å 为æ¹æ³ä¸ï¼æ¯ä¸ªè¢«å
å«é¡µé½è¦å»å¼å
¥ä¸æ®µç¸åç代ç æ¥åè¿ä¸ªäºæ
ï¼å建äºå¥½å¤å¯æ¬ã
å¦æåªèèFXåIEï¼å¹¶ä¸ï¼iframeéé¢å
容ä¹ä¸è¿è¡DOMæä½ï¼é£ä»ç¶å¯ä»¥ç¨æç®åææ¹ä¾¿çä¼ ç»å¤çæ¹å¼ï¼
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
两个æ¹æ³é½åªå¤çäºéçä¸è¥¿ï¼å°±æ¯åªå¨å
容å è½½çæ¶åæ§è¡ï¼å¦æJSå»æä½DOMå¼èµ·çé«åº¦ååï¼é½ä¸å¤ªæ¹ä¾¿ã
å¦æå¨ä¸»çªå£åä¸ä¸ªIntervalï¼ä¸åçæ¥è·å被å
å«é¡µçé«åº¦ï¼ç¶åååæ¥ï¼æ¯ä¸æ¯å³æ¹ä¾¿ï¼å解å³äºJSæä½DOMçé®é¢äºå¢ï¼çæ¡æ¯è¯å®çã
Demo页é¢ï¼ä¸»é¡µé¢ iframe_a.html ï¼è¢«å
å«é¡µé¢ iframe_b.htm å iframe_c.html
主页é¢ä»£ç 示ä¾ï¼
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
ä¸ç´æ§è¡ï¼æçä¼ä¸ä¼æé®é¢ï¼
æåäºæµè¯ï¼åæ¶å¼5个çªå£ï¼IE6ãIE7ãFFãOperaãSafariï¼æ§è¡è¿ä¸ªä»£ç ï¼ä¸ä¼å¯¹CPUæä»ä¹å½±åï¼çè³è°æ´å°2msï¼ä¹æ²¡å½±åï¼åºæ¬ç»´æå¨0%å ç¨çï¼ã
ä¸é¢è°è°åæµè§å¨çå
¼å®¹æ§é®é¢ï¼å¦ä½è·åå°æ£ç¡®çé«åº¦ï¼ä¸»è¦æ¯å¯¹body.scrollHeightådocumentElement.scrollHeight两个å¼å¾æ¯è¾ã注ææ¬æç¨çæ¯è¿ä¸ªdoctypeï¼ä¸åçdoctypeåºè¯¥ä¸ä¼å½±åç»æï¼ä½æ¯åå¦ä½ ç页é¢æ²¡æç³ædoctypeï¼é£è¿æ¯å
å»å ä¸ä¸ªå§ã
<!DOCTYPE HTML PUBLIC "
å¨ä¸»é¡µé¢è¿½å 以ä¸æµè¯ä»£ç ï¼ä»¥è¾åºè¿ä¸¤ä¸ªå¼ï¼ä»£ç 示ä¾ï¼
<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">
function checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
</script>
被å 载页é¢ï¼å¯ä»¥åæ¢ä¸ä¸ªç»å¯¹å®ä½çå±ï¼æ¥ä½¿é¡µé¢é«åº¦å¨ææ¹åãå¦æå±å±å¼ï¼åä¼æé«é¡µé¢é«åº¦ã代ç 示ä¾ï¼
<div><button onclick="toggleOverlay()">Toggle Overlay</button>
</div>
<div style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
</script>
ä¸é¢ååºä»¥ä¸ä»£ç å¨åæµè§å¨çæµè¯å¼ï¼
ï¼bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, çº¢è² = é误å¼, ç»¿è² = æ£ç¡®å¼ï¼
/
å±éèæ¶
å±å±å¼æ¶
bHeight
dHeight
bHeight
dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184
æä¸æ è§Operaæ¯å«äººå°3åç´ çé®é¢â¦å¯ä»¥çåºï¼å¦æ没æç»å¯¹å®ä½çä¸è¥¿ï¼ä¸¤ä¸ªå¼æ¯ç¸ççï¼ååªä¸ªé½æ æè°ã
ä½æ¯å¦ææï¼é£ä¹å个æµè§å¨ç表ç°ä¸å¤ªç¸åï¼åååªä¸ªå¼é½ä¸å¯¹ãä½å¯ä»¥æ¾å°äºä¸æ¡è§å¾ï¼é£å°±æ¯å两个å¼å¾æ大å¼å¯ä»¥å
¼å®¹åæµè§å¨ãæ以æ们ç主页é¢ä»£ç å°±è¦æ¹é æè¿æ ·äºï¼
function reinitIframe(){var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
è¿æ ·åï¼åºæ¬è§£å³äºå
¼å®¹æ§é®é¢ã顺便说ä¸ï¼ä¸å
ç»å¯¹å®ä½çå±ä¼å½±åå°å¼ï¼floatä¹ä¼å¯¼è´ä¸¤ä¸ªå¼çå·®å¼ã
å¦æä½ æ¼ç¤ºDemoåï¼ä¼åç°ï¼é¤äºIEï¼å
¶ä»æµè§å¨ä¸ï¼å½å±å±å¼ååéèï¼åå°çé«åº¦å¼è¿æ¯ç»´æå¨å±å¼çé«åº¦303ï¼èééèåå»ççæ£å¼184ï¼å°±æ¯è¯´é¿é«äºä¹å缩ä¸åå»äºãè¿ä¸ªç°è±¡å¨ä¸å被å
å«é¡µé¢ä¹é´ååæ¢ä¹ä¼åçï¼å½ä»é«ç页é¢åæ¢å°ç®é¡µé¢çæ¶åï¼åå°çé«åº¦è¿æ¯é£ä¸ªé«çå¼ã
å¯ä»¥å½çº³ä¸ºï¼å½iframeçªä½é«åº¦é«äºææ¡£å®é
é«åº¦çæ¶åï¼é«åº¦åçæ¯çªä½é«åº¦ï¼èå½çªä½é«åº¦ä½äºå®é
ææ¡£é«åº¦æ¶ï¼åçæ¯ææ¡£å®é
é«åº¦ãå æ¤ï¼è¦æ³åæ³å¨åæ¥é«åº¦ä¹åæé«åº¦è®¾ç½®å°ä¸ä¸ªæ¯å®é
ææ¡£ä½çå¼ãæ以ï¼å¨iframeçæ·»å onload=âthis.height=100â³ï¼è®©é¡µé¢å è½½çæ¶åå
缩å°è¶³å¤ç®ï¼ç¶åååæ¥å°ä¸æ ·çé«åº¦ã
è¿ä¸ªå¼ï¼å¨å®é
åºç¨ä¸å³å®ï¼è¶³å¤ç®ä½åä¸è½å¤ªç®ï¼å¦åå¨FFçæµè§å¨éä¼æå¾ææ¾çéªçãDOMæä½çæ¶å主页é¢æ æ³çå¬å°ï¼åªè½DOMæä½å®äºä¹åæé«åº¦åå°äºã
å¨æçä¸ä¸ªå®é
项ç®ä¸ï¼å¨ææ¬åæ¶çä¹é´æè¡¡ï¼æ并没æåè¿ä¸ªäºæ
ï¼å 为æ¯ä¸ªDOMå½æ°ä¸é½è¦æå
¥è¿ä¸ªä»£ç ï¼ä»£ä»·å¤ªé«ï¼å
¶å®å±ç¼©åå»ä¸ç¼©æä¹ä¸æ¯é£ä¹è´å½ãå
æ¬Demoéï¼ä¹æ²¡æå»åè¿ä¸ªäºæ
ãå¦æ读è
ææ´å¥½çæ¹æ³ï¼è¯·åè¯æã
è¿æ¯æç»ç主页é¢ç代ç ï¼
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
éDemo页é¢ï¼ ä¸»é¡µé¢ iframe_a.html ï¼è¢«å
å«é¡µé¢ iframe_b.htm å iframe_c.html
温馨提示:内容为网友见解,仅供参考