三談Iframe自適應(yīng)高度代碼
發(fā)布時(shí)間：2010-08-06 01:43:31 作者：佚名 
我要評(píng)論
我要評(píng)論在構(gòu)建B/S系統(tǒng)界面的時(shí)候，經(jīng)常會(huì)遇到主頁(yè)面index.html中嵌套其他頁(yè)面的情況 ，雖然已經(jīng)有的庫(kù)已經(jīng)提供了控件(例如jQuery easy UI),但是有時(shí)候iframe的使用是不可避免的
在構(gòu)建B/S系統(tǒng)界面的時(shí)候，經(jīng)常會(huì)遇到主頁(yè)面index.html中嵌套其他頁(yè)面的情況 ，雖然已經(jīng)有的庫(kù)已經(jīng)提供了控件(例如jQuery easy UI),但是有時(shí)候iframe的使用是不可避免的,這篇文章應(yīng)該給你一個(gè)相對(duì)來(lái)說(shuō)比較實(shí)用的答案,正象文章所說(shuō),互聯(lián)網(wǎng)上的大部分東西都是垃圾或者是不可相信的！原文有KOUBEI UED 由校 整理！
為什么是三談
為什么是三談呢？一是因?yàn)檫@真的是一個(gè)被說(shuō)爛的話題，二是因?yàn)樘珟煾翟趎年前就寫(xiě)過(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 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);
}
})();
同域、子頁(yè)面高度會(huì)動(dòng)態(tài)增加
原理與第一種情況一樣，多一個(gè)計(jì)時(shí)器，一直檢測(cè)字頁(yè)面高度，當(dāng)子頁(yè)面高度和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);});
}
})();
同域、子頁(yè)面高度會(huì)動(dòng)態(tài)增加、腳本可能完全失效
第二個(gè)例子中，考慮到了腳本出錯(cuò)的情況，但是萬(wàn)一腳本根本不執(zhí)行了呢，那iframe中的內(nèi)容就會(huì)因?yàn)閕frame的高度不夠而顯示不了。為此我們通常事先設(shè)置一個(gè)足夠的高度，為了前端控制方便，我覺(jué)得寫(xiě)在CSS文件中比較合適，需要修改時(shí)只改CSS就行了。這里我設(shè)置了selector{ height:1800px; }。需要注意的是，寫(xiě)在樣式表里的樣式，不能直接用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。
從上面這個(gè)Demo可以看到，除IE瀏覽器外，別的瀏覽器計(jì)算出來(lái)的都是iframe的高度，即CSS里設(shè)置的#frame_content_parent{ height:1800px; }。而IE計(jì)算出來(lái)的是iframe所引用頁(yè)面的實(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代理的方法，簡(jiǎn)單地說(shuō)一下原理。假設(shè)有3個(gè)頁(yè)面，分別是主頁(yè)面A.html，字頁(yè)面B.html，代理頁(yè)面C.html。其中A與B是跨域的，而A和C是同域的。它們的關(guān)系：A包含B，B包含C。很顯然A和B，以及B和C，因?yàn)榭缬虿荒芟嗷ネㄐ牛鳤和C同域，可以相互通信。為此我們就想到讓C頁(yè)面告訴A頁(yè)面，B頁(yè)面到底有多少高。因?yàn)锽和C也是跨域的不能相互通信，所以想在C頁(yè)面中，直接window.parent.document.body.scrollHeight這樣是行不通的，所以我們只能讓B頁(yè)面自己計(jì)算自身的高度，然后通過(guò)某種方法告訴C頁(yè)面，再由C頁(yè)面告訴A頁(yè)面。這里的一個(gè)方法就是在B頁(yè)面生成一個(gè)Iframe節(jié)點(diǎn)，然后設(shè)置它的src屬性，在這個(gè)地址上附加一個(gè)參數(shù)，即B頁(yè)面計(jì)算出來(lái)的高度，然后C頁(yè)面就可以通過(guò)window.location獲取這個(gè)地址欄中的地址，提取出高度值，通過(guò)window.top找到A頁(yè)面，設(shè)置A頁(yè)面的Iframe的高度?；镜脑砭褪沁@樣，看代碼吧：
DEMO
//B頁(yè)面腳本
//任務(wù)：計(jì)算其實(shí)際高度，然后生成一個(gè)iframe節(jié)點(diǎn)，將高度作為代理頁(yè)面C的地址的一部分賦值給Src屬性
(function(){
var agent_iframe = document.createElement("iframe"),
b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
document.body.appendChild(agent_iframe);
agent_iframe.style.display = "none";
})();
//C頁(yè)面腳本
//任務(wù)：獲取請(qǐng)求地址中的高度值，將其賦值給A頁(yè)面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
跨域、字頁(yè)面高度動(dòng)態(tài)變化
這里結(jié)合了第2、第4兩種方法，我的想法是在B頁(yè)面通過(guò)一個(gè)計(jì)時(shí)器，不停計(jì)算B頁(yè)面的高度，一但變化，馬上修改iframe標(biāo)簽的src屬性，而C頁(yè)面也有計(jì)時(shí)器不斷監(jiān)聽(tīng)src的變化，改變Aiframe標(biāo)簽的高度。需要注意的是僅僅修改src屬性后面的錨點(diǎn)值（如“#1234”），頁(yè)面并不會(huì)刷新，不會(huì)重新請(qǐng)求，這也是在C頁(yè)面增加計(jì)時(shí)器的原因。
//B頁(yè)面腳本
(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 = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height;
document.body.appendChild(agent_iframe);
}
createIframe(preHeight);
var checkHeight = function(){
var currentHeight = getHeight();
if(currentHeight != preHeight){
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight;
preHeight = currentHeight;
}
setTimeout(checkHeight,500);
}
setTimeout(checkHeight,500);
})();
//C頁(yè)面腳本
(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每一次都重新請(qǐng)求，這樣C頁(yè)面就不需要計(jì)時(shí)器了，但是如果2次計(jì)算高度重復(fù)的話，就會(huì)導(dǎo)致src屬性的值相同，這樣瀏覽器就很可能不重新請(qǐng)求該頁(yè)面了，那么C頁(yè)面中的腳本也就不運(yùn)行了。要修復(fù)這個(gè)問(wèn)題很簡(jiǎn)單，只要在每次計(jì)算出來(lái)的src屬性上增加一個(gè)隨機(jī)數(shù)的參數(shù)就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563
//B頁(yè)面關(guān)鍵腳本
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;
//C頁(yè)面腳本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
為什么是三談
為什么是三談呢？一是因?yàn)檫@真的是一個(gè)被說(shuō)爛的話題，二是因?yàn)樘珟煾翟趎年前就寫(xiě)過(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(){}也可以。
復(fù)制代碼
代碼如下:(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);
}
})();
同域、子頁(yè)面高度會(huì)動(dòng)態(tài)增加
原理與第一種情況一樣，多一個(gè)計(jì)時(shí)器，一直檢測(cè)字頁(yè)面高度，當(dāng)子頁(yè)面高度和iframe的高度不一致時(shí)，重新設(shè)置iframe的高度。這邊也可以加一個(gè)try在js出錯(cuò)時(shí)，加一個(gè)足夠的高度。
復(fù)制代碼
代碼如下:(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é)得寫(xiě)在CSS文件中比較合適，需要修改時(shí)只改CSS就行了。這里我設(shè)置了selector{ height:1800px; }。需要注意的是，寫(xiě)在樣式表里的樣式，不能直接用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。
從上面這個(gè)Demo可以看到，除IE瀏覽器外，別的瀏覽器計(jì)算出來(lái)的都是iframe的高度，即CSS里設(shè)置的#frame_content_parent{ height:1800px; }。而IE計(jì)算出來(lái)的是iframe所引用頁(yè)面的實(shí)際高度。
復(fù)制代碼
代碼如下:#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代理的方法，簡(jiǎn)單地說(shuō)一下原理。假設(shè)有3個(gè)頁(yè)面，分別是主頁(yè)面A.html，字頁(yè)面B.html，代理頁(yè)面C.html。其中A與B是跨域的，而A和C是同域的。它們的關(guān)系：A包含B，B包含C。很顯然A和B，以及B和C，因?yàn)榭缬虿荒芟嗷ネㄐ牛鳤和C同域，可以相互通信。為此我們就想到讓C頁(yè)面告訴A頁(yè)面，B頁(yè)面到底有多少高。因?yàn)锽和C也是跨域的不能相互通信，所以想在C頁(yè)面中，直接window.parent.document.body.scrollHeight這樣是行不通的，所以我們只能讓B頁(yè)面自己計(jì)算自身的高度，然后通過(guò)某種方法告訴C頁(yè)面，再由C頁(yè)面告訴A頁(yè)面。這里的一個(gè)方法就是在B頁(yè)面生成一個(gè)Iframe節(jié)點(diǎn)，然后設(shè)置它的src屬性，在這個(gè)地址上附加一個(gè)參數(shù)，即B頁(yè)面計(jì)算出來(lái)的高度，然后C頁(yè)面就可以通過(guò)window.location獲取這個(gè)地址欄中的地址，提取出高度值，通過(guò)window.top找到A頁(yè)面，設(shè)置A頁(yè)面的Iframe的高度?；镜脑砭褪沁@樣，看代碼吧：
DEMO
復(fù)制代碼
代碼如下://B頁(yè)面腳本
//任務(wù)：計(jì)算其實(shí)際高度，然后生成一個(gè)iframe節(jié)點(diǎn)，將高度作為代理頁(yè)面C的地址的一部分賦值給Src屬性
(function(){
var agent_iframe = document.createElement("iframe"),
b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
document.body.appendChild(agent_iframe);
agent_iframe.style.display = "none";
})();
復(fù)制代碼
代碼如下://C頁(yè)面腳本
//任務(wù)：獲取請(qǐng)求地址中的高度值，將其賦值給A頁(yè)面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
跨域、字頁(yè)面高度動(dòng)態(tài)變化
這里結(jié)合了第2、第4兩種方法，我的想法是在B頁(yè)面通過(guò)一個(gè)計(jì)時(shí)器，不停計(jì)算B頁(yè)面的高度，一但變化，馬上修改iframe標(biāo)簽的src屬性，而C頁(yè)面也有計(jì)時(shí)器不斷監(jiān)聽(tīng)src的變化，改變Aiframe標(biāo)簽的高度。需要注意的是僅僅修改src屬性后面的錨點(diǎn)值（如“#1234”），頁(yè)面并不會(huì)刷新，不會(huì)重新請(qǐng)求，這也是在C頁(yè)面增加計(jì)時(shí)器的原因。
復(fù)制代碼
代碼如下://B頁(yè)面腳本
(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 = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height;
document.body.appendChild(agent_iframe);
}
createIframe(preHeight);
var checkHeight = function(){
var currentHeight = getHeight();
if(currentHeight != preHeight){
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight;
preHeight = currentHeight;
}
setTimeout(checkHeight,500);
}
setTimeout(checkHeight,500);
})();
復(fù)制代碼
代碼如下://C頁(yè)面腳本
(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每一次都重新請(qǐng)求，這樣C頁(yè)面就不需要計(jì)時(shí)器了，但是如果2次計(jì)算高度重復(fù)的話，就會(huì)導(dǎo)致src屬性的值相同，這樣瀏覽器就很可能不重新請(qǐng)求該頁(yè)面了，那么C頁(yè)面中的腳本也就不運(yùn)行了。要修復(fù)這個(gè)問(wèn)題很簡(jiǎn)單，只要在每次計(jì)算出來(lái)的src屬性上增加一個(gè)隨機(jī)數(shù)的參數(shù)就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563
復(fù)制代碼
代碼如下://B頁(yè)面關(guān)鍵腳本
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;
//C頁(yè)面腳本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
相關(guān)文章
- iframe如何刷新一直都被網(wǎng)友所關(guān)注，接下來(lái)為大家詳細(xì)介紹下三種:用iframe的name屬性定位/id屬性定位/當(dāng)iframe的src為其它網(wǎng)站地址時(shí),感興趣的朋友可以參考下哈2013-03-29
iframe的src設(shè)置為about:blank之后細(xì)節(jié)探討
不設(shè)置為about:blank，內(nèi)存不會(huì)釋放掉。還必須用 iframe.document.write(''); 這樣才能將內(nèi)容清空，本文將詳細(xì)探討一下iframe的src設(shè)置為about:blank之后細(xì)節(jié)，感興趣的你2013-02-25- frame的src賦值的問(wèn)題，本文將進(jìn)行詳細(xì)探討:服務(wù)器端的iframe重新src重新賦值,給iframe加一個(gè)ID，再加上runat=server，感興趣的你可不要錯(cuò)過(guò)了哈2013-02-25
網(wǎng)頁(yè)設(shè)計(jì)技巧:iframe自適應(yīng)高度的問(wèn)題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe2012-11-12- iframes 提供了一個(gè)簡(jiǎn)單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。但我們需要慎重的使用iframe。iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)2012-09-05
iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)
iframe一般用來(lái)包含別的頁(yè)面，例如我們可以在我們自己的網(wǎng)站頁(yè)面加載別人網(wǎng)站的內(nèi)容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡(jiǎn)2014-10-01- 有時(shí)候需要讓iframe繼承父頁(yè)面的顏色。不需要復(fù)雜的操作，簡(jiǎn)單的幾個(gè)參數(shù)設(shè)置下即可。2010-07-21
IE6 select z-index無(wú)效，遮擋div bug的解決方法
在最近的一個(gè)項(xiàng)目中，遇到了IE6 select遮擋div的bug，為了解決這個(gè)bug我查了很多資料，試圖找到一個(gè)最最有效的方法，很多人是通過(guò)iframe的方法來(lái)解決，其實(shí)我查了國(guó)外的很2010-06-18Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）
在實(shí)際的項(xiàng)目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開(kāi)發(fā)也是如此。2010-03-17- Iframe和FRAME的區(qū)別，方便大家以后在使用過(guò)程中根據(jù)實(shí)際需要取舍。2010-03-08