iframe 自適應(yīng)高度(iframe自適應(yīng)高度張旭鑫)

iframe框架高度如何自適應(yīng)！

<iframe
scrolling="no"
name="aa"
frameborder="0"
src="bb.html"
onload="this.height=0;var
fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offtHeight);this.height=(fdh>700?fdh:700)"></iframe>
iframe高度自適應(yīng)，700為自己設(shè)定的iframe高度最低值，高度小于700的將以700顯示，大于700將以div自身高度來(lái)顯示。iframe高度最低值可以自己修改

怎么讓iframe的高度自適應(yīng)

什么是自適應(yīng)高度吧。所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe。如果iframe始終調(diào)用同一個(gè)固定高度的頁(yè)面，我們直接寫死iframe高度就可以了。

HTML的frame框架怎么自適應(yīng)高度？

HTML的frame框架自適應(yīng)高度的6個(gè)方法:

1、可以給它添加一個(gè)默認(rèn)的CSS的min-height值，然后同時(shí)使用JavaScript改變高度。常用的兼容代碼有：

//document.domain="caibaojian.com";
functiontIframeHeight(iframe){
if(iframe){
variframeWin=iframe.contentWindow||iframe.contentDocument.parentWindow;
if(iframeWin.document.body){
iframe.height=iframeWin.document.documentElement.scrollHeight||iframeWin.document.body.scrollHeight;
}
}
};

window.onload=function(){
tIframeHeight(document.getElementById('external-frame'));
};

（如果在同個(gè)頂級(jí)域名下，不同子域名之間互通信息，設(shè)置document.domain="域名.com"

2、只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面寫代碼，我們一般為了不污染HTML代碼，建議使用上面的代碼。

<iframesrc="backtop.html"frameborder="0"scrolling="no"id="external-frame"onload="tIframeHeight(this)"></iframe>

3、多個(gè)iframe的情況下

<scriptlanguage="javascript">
//輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱的列表
//用逗號(hào)把每個(gè)iframe的ID分隔.例如:["myframe1","myframe2"]，可以只有一個(gè)窗體，則不用逗號(hào)。
//定義iframe的ID
variframeids=["test"];
//如果用戶的瀏覽器不支持iframe是否將iframe隱藏yes表示隱藏，no表示不隱藏
variframehide="yes";
functiondyniframesize()
{
vardyniframe=newArray()
for(i=0;i<iframeids.length;i++)
{
if(document.getElementById)
{
//自動(dòng)調(diào)整iframe高度
dyniframe[dyniframe.length]=document.getElementById(iframeids[i]);
if(dyniframe[i]&&!window.opera)
{
dyniframe[i].style.display="block";
if(dyniframe[i].contentDocument&&dyniframe[i].contentDocument.body.offtHeight)//如果用戶的瀏覽器是NetScape
dyniframe[i].height=dyniframe[i].contentDocument.body.offtHeight;
elif(dyniframe[i].Document&&dyniframe[i].Document.body.scrollHeight)//如果用戶的瀏覽器是IE
dyniframe[i].height=dyniframe[i].Document.body.scrollHeight;
}
}
//根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題
if((document.all||document.getElementById)&&iframehide=="no")
{
vartempobj=document.all?document.all[iframeids[i]]:document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if(window.addEventListener)
window.addEventListener("load",dyniframesize,fal);
elif(window.attachEvent)
window.attachEvent("onload",dyniframesize);
el
window.onload=dyniframesize;
</script>

4、打開調(diào)試運(yùn)行窗口可以看到運(yùn)行。·

跨域下的iframe自適應(yīng)高度

跨域的時(shí)候，由于js的同源策略，父頁(yè)面內(nèi)的js不能獲取到iframe頁(yè)面的高度。需要一個(gè)頁(yè)面來(lái)做代理。
方法如下：假設(shè)www.a.com下的一個(gè)頁(yè)面a.html要包含www.b.com下的一個(gè)頁(yè)面c.html。
我們使用www.a.com下的另一個(gè)頁(yè)面agent.html來(lái)做代理，通過(guò)它獲取iframe頁(yè)面的高度，并設(shè)定iframe元素的高度。

a.html中包含iframe:

<iframesrc="http://www.b.com/c.html"id="Iframe"frameborder="0"scrolling="no"style="border:0px;"></iframe>

5、在c.html中加入如下代碼：

<iframeid="c_iframe"height="0"width="0"src="http://www.a.com/agent.html"style="display:none"></iframe>
<scripttype="text/javascript">
(functionautoHeight(){
varb_width=Math.max(document.body.scrollWidth,document.body.clientWidth);
varb_height=Math.max(document.body.scrollHeight,document.body.clientHeight);
varc_iframe=document.getElementById("c_iframe");
c_iframe.src=c_iframe.src+"#"+b_width+"|"+b_height;//這里通過(guò)hash傳遞b.htm的寬高
})();
</script>

6、最后，agent.html中放入一段js:

<scripttype="text/javascript">
varb_iframe=window.parent.parent.document.getElementById("Iframe");
varhash_url=window.location.hash;
if(hash_url.indexOf("#")>=0){
varhash_width=hash_url.split("#")[1].split("|")[0]+"px";
varhash_height=hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width=hash_width;
b_iframe.style.height=hash_height;
}
</script>

agent.html從URL中獲得寬度值和高度值，并設(shè)置iframe的高度和寬度（因?yàn)閍gent.html在www.a.com下，所以操作a.html時(shí)不受JavaScript的同源限制）

Safari瀏覽器下怎么實(shí)現(xiàn)iframe高度自適應(yīng)

實(shí)現(xiàn) iframe 的自適應(yīng)高度，能夠隨著頁(yè)面的長(zhǎng)度自動(dòng)的適應(yīng)以免除頁(yè)面和 iframe 同時(shí)出現(xiàn)滾動(dòng)條的現(xiàn)象。

<script type="text/javascript">
//** iframe自動(dòng)適應(yīng)頁(yè)面 **//
//輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱的列表
//用逗號(hào)把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個(gè)窗體，則不用逗號(hào)。
//定義iframe的ID
var iframeids=["test"]
//如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自動(dòng)調(diào)整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offtHeight) //如果用戶的瀏覽器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offtHeight;
el if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用戶的瀏覽器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, fal)
el if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
el
window.onload=dyniframesize
</script>

什么命令可以使iframe框架里的被引用頁(yè)面寬高自適應(yīng)框架寬高？

并不是里頁(yè)面高度自適是，而是外面的iframe高度自適應(yīng)你引入的頁(yè)面的高度。思路是js控制iframe自適應(yīng)高度，因?yàn)閕frame本身并不能自適應(yīng)高度，只有寫死高度才行，所以要用js判斷整個(gè)頁(yè)面內(nèi)容的高度。
給你的代碼:
<iframe allowtransparency="true" src="你要入引的頁(yè)面.htm" id="defaulIframePage" name="defaulIframePage" frameborder="0" scrolling="no" width="100%" onload="defaulIframePageHeight()">

</iframe>

js部分:
function defaulIframePageHeight()

{
var ifm = document.getElementById("defaulIframePage");
var subWeb = document.frames ? document.frames["defaulIframePage"].document : ifm.contentDocument;
if (ifm != null && subWeb != null)

{
ifm.height = subWeb.body.scrollHeight;
}
}