快捷導(dǎo)航

IFrame跨域高度自適應(yīng)實(shí)現(xiàn)代碼

更新時(shí)間：2012年08月16日 12:02:20 作者：

最近在做項(xiàng)目中，遇到一個(gè)問題，就是iframe高度的自適應(yīng)問題，以下是解決辦法

 
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; 
var iframehide = "yes"; 
function dynIframeSize(){ 
var dyniframe = []; 
for(var i=0;i<iframeids.length;i++){ 
if(!document.getElementById) return false; 
dyniframe[i] = document.getElementById(iframeids[i]); 
if(dyniframe[i] && !window.opera){ 
dyniframe[i].style.display = "block"; 
if(dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){ 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
}else if(dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){ 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
} 
} 
if((document.all || document.getElement) && iframeids == "no") { 
var tempobj = document.all?document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
tempobj.style.display = "block"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dynIframeSize, false) 
else if (window.attachEvent) 
window.attachEvent("onload", dynIframeSize) 
else { 
window.onload = dynIframeSize; 
} 

對(duì)于上面的代碼直接保存一個(gè)文件iframe.js，然后引用即可

注意：這段代碼對(duì)于跨域的iframe引用不太適用，需要特別定義其iframe高度

下面這個(gè)代碼是跨域的iframe高度

項(xiàng)目網(wǎng)站中需要嵌入合作網(wǎng)站的頁面，這就需要頁面的自適應(yīng)高度變化，并且是跨域的。在網(wǎng)上看了許多資料，加上自己的實(shí)踐，終于實(shí)現(xiàn)了跨域的IFrame自適應(yīng)高度。如下：

首先，我的頁面a.html需要引入對(duì)方的b.html,在這里運(yùn)用iframe方式實(shí)現(xiàn)頁面的套用
a.html頁面的主要代碼如下：

復(fù)制代碼代碼如下:

 
<BODY> 
<iframe width="100%" id="a_iframe" name="a_iframe" src="http://對(duì)方域名/b.html" 
frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe> 
</BODY> 

a.html頁面只是用來引入對(duì)方頁面的一個(gè)簡單頁面這就不多做介紹。
然后，最好在a.html同一級(jí)目錄下，創(chuàng)建一個(gè)agent.html頁面，該頁面用來得到對(duì)方通過js傳遞過來的參數(shù)，
根據(jù)高度參數(shù)來調(diào)整a.html中的a_iframe的高度，主要代碼如下：
Js代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//得到a.html中的a_iframe 
var a_iframe = parent.parent.document.getElementById("a_iframe"); 
//<SPAN>location.hash用來獲取頁面的標(biāo)簽值</SPAN> 
，這個(gè)值通過b.html中的js函數(shù)改變。包括height屬性 
var hash_url = window.location.hash; 
//得到b.html傳遞過來的height屬性 
var hash_height = hash_url.split("#")[1]+"px"; 
//調(diào)整a_iframe的height，達(dá)到自適應(yīng) 
a_iframe.height = hash_height; 
</script> 

最后，對(duì)方的頁面(b.html),讓對(duì)方在b.html中加入以下javascript代碼

復(fù)制代碼代碼如下:

 
<iframe id="b_iframe" width="100%" src="http://我的域名/../agent.html" style="display:none"> 
</iframe> 
<script type="text/javascript"> 
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); 
var b_iframe = document.getElementById("b_iframe"); 
b_iframe.src = b_frame.src+"#"+b_height; 
</script> 

通過 Math.max(clientHeight,scrollHeight)比較網(wǎng)頁可見區(qū)域高,網(wǎng)頁正文全文高這兩者得到其中的較大的值后，
iframe將這個(gè)height通過src傳遞到我的agent.html,這樣a.html中的Iframe就能自適應(yīng)對(duì)方的b.html高度了。這里在IE下測試的沒問題，其它瀏覽器沒測試。
在實(shí)現(xiàn)這個(gè)功能的過程中，在網(wǎng)上發(fā)現(xiàn)了一段很有用的獲取頁面高度的js，在這里也記錄、引用下：

復(fù)制代碼代碼如下:

 
<script> 
var strInfo=" " ; 
strInfo+=" \r\n網(wǎng)頁可見區(qū)域?qū)?" +document.body.clientWidth; 
strInfo+=" \r\n網(wǎng)頁可見區(qū)域高:" +document.body.clientHeight; 
strInfo+=" \r\n網(wǎng)頁可見區(qū)域?qū)?" +document.body.offsetWidth+" (包括邊線的寬)" ; 
strInfo+=" \r\n網(wǎng)頁可見區(qū)域高:" +document.body.offsetHeight+" (包括邊線的寬)" ; 
strInfo+=" \r\n網(wǎng)頁正文全文寬:" +document.body.scrollWidth; 
strInfo+=" \r\n網(wǎng)頁正文全文高:" +document.body.scrollHeight; 
strInfo+=" \r\n網(wǎng)頁被卷去的高:" +document.body.scrollTop; 
strInfo+=" \r\n網(wǎng)頁被卷去的左:" +document.body.scrollLeft; 
strInfo+=" \r\n網(wǎng)頁正文部分上:" +window.screenTop; 
strInfo+=" \r\n網(wǎng)頁正文部分左:" +window.screenLeft; 
strInfo+=" \r\n屏幕分辨率的高:" +window.screen.height; 
strInfo+=" \r\n屏幕分辨率的寬:" +window.screen.width; 
strInfo+=" \r\n屏幕可用工作區(qū)高度:" +window.screen.availHeight; 
strInfo+=" \r\n屏幕可用工作區(qū)寬度:" +window.screen.availWidth; 
window.confirm(strInfo); 
</script> 