復制代碼 代碼如下:
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;
}
對於上面的代碼直接保存一個文件iframe.js，然後引用即可
注意：這段代碼對於跨域的iframe引用不太適用，需要特別定義其iframe高度
下面這個代碼是跨域的iframe高度 項目網站中需要嵌入合作網站的頁面，這就需要頁面的自適應高度變化，並且是跨域的。在網上看了許多資料，加上自己的實踐，終於實現了跨域的IFrame自適應高度。如下：
首先，我的頁面a.html需要引入對方的b.html,在這裡運用iframe方式實現頁面的套用
a.html頁面的主要代碼如下：
復制代碼 代碼如下:
<BODY>
<iframe width="100%" id="a_iframe" name="a_iframe" src="http://對方域名/b.html"
frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe>
</BODY>
a.html頁面只是用來引入對方頁面的一個簡單頁面 這就不多做介紹。
然後，最好在a.html同一級目錄下，創建一個agent.html頁面，該頁面用來得到對方通過js傳遞過來的參數，
根據高度參數來調整a.html中的a_iframe的高度，主要代碼如下：
Js代碼
復制代碼 代碼如下:
<script type="text/javascript">
//得到a.html中的a_iframe
var a_iframe = parent.parent.document.getElementById("a_iframe");
//<SPAN>location.hash用來獲取頁面的標簽值</SPAN>
，這個值通過b.html中的js函數改變。包括height屬性
var hash_url = window.location.hash;
//得到b.html傳遞過來的height屬性
var hash_height = hash_url.split("#")[1]+"px";
//調整a_iframe的height，達到自適應
a_iframe.height = hash_height;
</script>
最後，對方的頁面(b.html),讓對方在b.html中加入以下javascript代碼
復制代碼 代碼如下:
<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)比較網頁可見區域高,網頁正文全文高這兩者得到其中的較大的值後，
iframe將這個height通過src傳遞到我的agent.html,這樣a.html中的Iframe就能自適應對方的b.html高度了。這裡在IE下測試的沒問題，其它浏覽器沒測試。
在實現這個功能的過程中，在網上發現了一段很有用的獲取頁面高度的js，在這裡也記錄、引用下：
復制代碼 代碼如下:
<script>
var strInfo=" " ;
strInfo+=" \r\n網頁可見區域寬:" +document.body.clientWidth;
strInfo+=" \r\n網頁可見區域高:" +document.body.clientHeight;
strInfo+=" \r\n網頁可見區域寬:" +document.body.offsetWidth+" (包括邊線的寬)" ;
strInfo+=" \r\n網頁可見區域高:" +document.body.offsetHeight+" (包括邊線的寬)" ;
strInfo+=" \r\n網頁正文全文寬:" +document.body.scrollWidth;
strInfo+=" \r\n網頁正文全文高:" +document.body.scrollHeight;
strInfo+=" \r\n網頁被卷去的高:" +document.body.scrollTop;
strInfo+=" \r\n網頁被卷去的左:" +document.body.scrollLeft;
strInfo+=" \r\n網頁正文部分上:" +window.screenTop;
strInfo+=" \r\n網頁正文部分左:" +window.screenLeft;
strInfo+=" \r\n屏幕分辨率的高:" +window.screen.height;
strInfo+=" \r\n屏幕分辨率的寬:" +window.screen.width;
strInfo+=" \r\n屏幕可用工作區高度:" +window.screen.availHeight;
strInfo+=" \r\n屏幕可用工作區寬度:" +window.screen.availWidth;
window.confirm(strInfo);
</script>