|
為什么是三談
為什么是三談呢？一是因?yàn)檫@真的是一個(gè)被說(shuō)爛的話題，二是因?yàn)樘珟煾翟趎年前就寫過(guò)這篇再談iframe自適應(yīng)高度。之所以再提該問(wèn)題，是因?yàn)橹绊?xiàng)目中確實(shí)遇到了這個(gè)問(wèn)題的方方面面，有必要總結(jié)一下。希望對(duì)各位有幫助，有錯(cuò)誤請(qǐng)指正。
同域、子頁(yè)面高度不會(huì)動(dòng)態(tài)增加
這種情況最簡(jiǎn)單，直接通過(guò)腳本獲取字頁(yè)面實(shí)際高度，修改iframe元素高度即可。但有二點(diǎn)必須注意：
如果頁(yè)面內(nèi)有絕對(duì)定位或者沒(méi)有清浮動(dòng)的元素，情況有些復(fù)雜，不同瀏覽器處理結(jié)果不同，甚至包括Webkit內(nèi)核的瀏覽器，具體請(qǐng)看這個(gè)Demo。所以你要么進(jìn)行瀏覽器檢測(cè)，要么用Math.max計(jì)算一個(gè)最大值，要么你想別的方法。
iframe所包含頁(yè)面可能非常大，需要很長(zhǎng)的加載時(shí)間，為此直接計(jì)算高度的時(shí)候，很可能頁(yè)面還沒(méi)下載完，高度計(jì)算就會(huì)有問(wèn)題。所以最好在iframe的onload事件中計(jì)算高度。這里還要注意的是，IE下必須使用微軟事件模型obj.attachEvent來(lái)綁定onload事件。而別的瀏覽器直接obj.onload = function(){}也可以。
(function(){
var _reSetIframe = function(){
var frame = document.getElementById("frame_content_parent")
try {
var frameContent = frame.contentWindow.document,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (bodyHeight != frame.height){
frame.height = bodyHeight;
}
}
catch(ex) {
frame.height = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}else{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
同域、子頁(yè)面高度會(huì)動(dòng)態(tài)增加、腳本可能完全失效
第二個(gè)例子中，考慮到了腳本出錯(cuò)的情況，但是萬(wàn)一腳本根本不執(zhí)行了呢，那iframe中的內(nèi)容就會(huì)因?yàn)閕frame的高度不夠而顯示不了。為此我們通常事先設(shè)置一個(gè)足夠的高度，為了前端控制方便，我覺(jué)得寫在CSS文件中比較合適，需要修改時(shí)只改CSS就行了。這里我設(shè)置了selector{ height:1800px; }。需要注意的是，寫在樣式表里的樣式，不能直接用node.style[property]來(lái)取，對(duì)于微軟模型，要用node.currentStyle[property]（題外話：悲劇的IE模型不支持CSS偽類），對(duì)于W3C模型，要用window.getComputedStyle(node,null)[property]來(lái)取。我這里圖方便直接用了YUI。
這里又有一個(gè)問(wèn)題，設(shè)置iframe的高度大于其包含頁(yè)面的高度時(shí)，各個(gè)瀏覽器的處理不一樣。例如在Firefox下，必須計(jì)算body元素的高度，而html元素的高度等于iframe的高度，然而當(dāng)恰巧這個(gè)頁(yè)面又有絕對(duì)定位、未清浮動(dòng)元素時(shí)，又不能通過(guò)body元素來(lái)取，顯然第一種方法缺點(diǎn)更小一些。具體請(qǐng)看這個(gè)Demo。
出處：口碑網(wǎng)UED Team
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 三談Iframe自適應(yīng)高度 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 三談Iframe自適應(yīng)高度 [1]
第 2 頁(yè) 
