這篇文章主要介紹了Iframe如何自適應(yīng)高度，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在構(gòu)建B/S系統(tǒng)界面的時(shí)候，經(jīng)常會(huì)遇到主頁面index.html中嵌套其他頁面的情況 ，雖然已經(jīng)有的庫已經(jīng)提供了控件(例如jQuery easy UI),但是有時(shí)候iframe的使用是不可避免的,這篇文章應(yīng)該給你一個(gè)相對來說比較實(shí)用的答案,正象文章所說,互聯(lián)網(wǎng)上的大部分東西都是垃圾或者是不可相信的！原文有KOUBEI UED 由校 整理！
為什么是三談
為什么是三談呢？一是因?yàn)檫@真的是一個(gè)被說爛的話題，二是因?yàn)樘珟煾翟趎年前就寫過這篇再談iframe自適應(yīng)高度。之所以再提該問題，是因?yàn)橹绊?xiàng)目中確實(shí)遇到了這個(gè)問題的方方面面，有必要總結(jié)一下。希望對各位有幫助，有錯(cuò)誤請指正。
同域、子頁面高度不會(huì)動(dòng)態(tài)增加
這種情況最簡單，直接通過腳本獲取字頁面實(shí)際高度，修改iframe元素高度即可。但有二點(diǎn)必須注意：
如果頁面內(nèi)有絕對定位或者沒有清浮動(dòng)的元素，情況有些復(fù)雜，不同瀏覽器處理結(jié)果不同，甚至包括Webkit內(nèi)核的瀏覽器，具體請看這個(gè)Demo。所以你要么進(jìn)行瀏覽器檢測，要么用Math.max計(jì)算一個(gè)較大值，要么你想別的方法。
iframe所包含頁面可能非常大，需要很長的加載時(shí)間，為此直接計(jì)算高度的時(shí)候，很可能頁面還沒下載完，高度計(jì)算就會(huì)有問題。所以好在iframe的onload事件中計(jì)算高度。這里還要注意的是，IE下必須使用微軟事件模型obj.attachEvent來綁定onload事件。而別的瀏覽器直接obj.onload = function(){}也可以。
代碼如下:
(function(){
var frame = document.getElementById("frame_content_parent"),
setIframeHeight = function(){
var frameContent = frame.contentWindow.document,
frameHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);
frame.height = frameHeight;
};
if(frame.addEventListener){
frame.addEventListener("load",setIframeHeight,false);
}else{
frame.attachEvent("onload",setIframeHeight);
}
})();
同域、子頁面高度會(huì)動(dòng)態(tài)增加
原理與第一種情況一樣，多一個(gè)計(jì)時(shí)器，一直檢測字頁面高度，當(dāng)子頁面高度和iframe的高度不一致時(shí)，重新設(shè)置iframe的高度。這邊也可以加一個(gè)try在js出錯(cuò)時(shí)，加一個(gè)足夠的高度。
代碼如下:
(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);});
}
})();
同域、子頁面高度會(huì)動(dòng)態(tài)增加、腳本可能完全失效
第二個(gè)例子中，考慮到了腳本出錯(cuò)的情況，但是萬一腳本根本不執(zhí)行了呢，那iframe中的內(nèi)容就會(huì)因?yàn)閕frame的高度不夠而顯示不了。為此我們通常事先設(shè)置一個(gè)足夠的高度，為了前端控制方便，我覺得寫在CSS文件中比較合適，需要修改時(shí)只改CSS就行了。這里我設(shè)置了selector{ height:1800px; }。需要注意的是，寫在樣式表里的樣式，不能直接用node.style[property]來取，對于微軟模型，要用node.currentStyle[property]（題外話：悲劇的IE模型不支持CSS偽類），對于W3C模型，要用window.getComputedStyle(node,null)[property]來取。我這里圖方便直接用了YUI。
這里又有一個(gè)問題，設(shè)置iframe的高度大于其包含頁面的高度時(shí)，各個(gè)瀏覽器的處理不一樣。例如在Firefox下，必須計(jì)算body元素的高度，而html元素的高度等于iframe的高度，然而當(dāng)恰巧這個(gè)頁面又有絕對定位、未清浮動(dòng)元素時(shí)，又不能通過body元素來取，顯然第一種方法缺點(diǎn)更小一些。具體請看這個(gè)Demo。
從上面這個(gè)Demo可以看到，除IE瀏覽器外，別的瀏覽器計(jì)算出來的都是iframe的高度，即CSS里設(shè)置的#frame_content_parent{ height:1800px; }。而IE計(jì)算出來的是iframe所引用頁面的實(shí)際高度。
代碼如下:
#frame_content_parent{ height:1800px; }
(function(){
var $ = YAHOO.util.Dom,
frame = $.get("frame_content_parent");
function reSetIframe(){
var frameContent = frame.contentWindow.document,
bodyHeight = Math.max(frameContent.documentElement.scrollHeight,frameContent.body.scrollHeight);
if (bodyHeight != $.getStyle(frame, "height")){
$.setStyle(frame, "height", bodyHeight + "px");
}
}
if(frame){
$.setStyle(frame,"height","auto");
setInterval(reSetIframe,300);
}
})();
跨域
這里提供一個(gè)Iframe代理的方法，簡單地說一下原理。假設(shè)有3個(gè)頁面，分別是主頁面A.html，字頁面B.html，代理頁面C.html。其中A與B是跨域的，而A和C是同域的。它們的關(guān)系：A包含B，B包含C。很顯然A和B，以及B和C，因?yàn)榭缬虿荒芟嗷ネㄐ?，而A和C同域，可以相互通信。為此我們就想到讓C頁面告訴A頁面，B頁面到底有多少高。因?yàn)锽和C也是跨域的不能相互通信，所以想在C頁面中，直接window.parent.document.body.scrollHeight這樣是行不通的，所以我們只能讓B頁面自己計(jì)算自身的高度，然后通過某種方法告訴C頁面，再由C頁面告訴A頁面。這里的一個(gè)方法就是在B頁面生成一個(gè)Iframe節(jié)點(diǎn)，然后設(shè)置它的src屬性，在這個(gè)地址上附加一個(gè)參數(shù)，即B頁面計(jì)算出來的高度，然后C頁面就可以通過window.location獲取這個(gè)地址欄中的地址，提取出高度值，通過window.top找到A頁面，設(shè)置A頁面的Iframe的高度?；镜脑砭褪沁@樣，看代碼吧：
DEMO
代碼如下:
//B頁面腳本
//任務(wù)：計(jì)算其實(shí)際高度，然后生成一個(gè)iframe節(jié)點(diǎn)，將高度作為代理頁面C的地址的一部分賦值給Src屬性
(function(){
var agent_iframe = document.createElement("iframe"),
b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
agent_iframe.src = "/tupian/20230522/agent_iframe_once.html + b_height;
document.body.appendChild(agent_iframe);
agent_iframe.style.display = "none";
})();
代碼如下:
//C頁面腳本
//任務(wù)：獲取請求地址中的高度值，將其賦值給A頁面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
跨域、字頁面高度動(dòng)態(tài)變化
這里結(jié)合了第2、第4兩種方法，我的想法是在B頁面通過一個(gè)計(jì)時(shí)器，不停計(jì)算B頁面的高度，一但變化，馬上修改iframe標(biāo)簽的src屬性，而C頁面也有計(jì)時(shí)器不斷監(jiān)聽src的變化，改變Aiframe標(biāo)簽的高度。需要注意的是僅僅修改src屬性后面的錨點(diǎn)值（如“#1234”），頁面并不會(huì)刷新，不會(huì)重新請求，這也是在C頁面增加計(jì)時(shí)器的原因。
代碼如下:
//B頁面腳本
(function(){
var getHeight = function(){
return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
};
var preHeight = getHeight(),
agent_iframe;
var createIframe = function(height){
agent_iframe = document.createElement("iframe");
agent_iframe.style.height = "0";
agent_iframe.style.width = "0";
agent_iframe.style.border = "none";
agent_iframe.src = "/tupian/20230522/agent_iframe.html + height;
document.body.appendChild(agent_iframe);
}
createIframe(preHeight);
var checkHeight = function(){
var currentHeight = getHeight();
if(currentHeight != preHeight){
agent_iframe.src = "/tupian/20230522/agent_iframe.html + currentHeight;
preHeight = currentHeight;
}
setTimeout(checkHeight,500);
}
setTimeout(checkHeight,500);
})();
代碼如下:
//C頁面腳本
(function(){
var preHeight = parseInt(window.location.hash.substring(1),10),
ifrmae = window.top.document.getElementById("frame_content_parent");
ifrmae.height = preHeight;
setInterval(function(){
var newHeight = parseInt(window.location.hash.substring(1),10);
if (newHeight !== preHeight){
ifrmae.height = newHeight;
preHeight = newHeight;
}
},500);
})();
這里還有另一種方案，就是讓iframe每一次都重新請求，這樣C頁面就不需要計(jì)時(shí)器了，但是如果2次計(jì)算高度重復(fù)的話，就會(huì)導(dǎo)致src屬性的值相同，這樣瀏覽器就很可能不重新請求該頁面了，那么C頁面中的腳本也就不運(yùn)行了。要修復(fù)這個(gè)問題很簡單，只要在每次計(jì)算出來的src屬性上增加一個(gè)隨機(jī)數(shù)的參數(shù)就行了。比如/tupian/20230522/agent_iframe.html
代碼如下:
//B頁面關(guān)鍵腳本
agent_iframe.src = "/tupian/20230522/agent_iframe.html + Math.random() + "#" + currentHeight;
//C頁面腳本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Iframe如何自適應(yīng)高度”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
重慶分公司
重慶分公司
