快捷導(dǎo)航

JQuery自適應(yīng)IFrame高度（支持嵌套兼容IE,ff,safafi,chrome）

更新時(shí)間：2011年03月28日 19:17:11 作者：

很高興，終于使用jquery實(shí)現(xiàn)了點(diǎn)擊外部鏈接，更改iframe內(nèi)容時(shí)，iframe的高度自適應(yīng)問題。

 
function adjustIFramesHeightOnLoad(iframe) { 
var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight); 
$(iframe).height(iframeHeight); 
} 

失敗的測(cè)試就不說了，來直接的。
兩個(gè)鏈接和iframe：

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

 
<li><a href="selfinfo.jsp" target="c-c-iframe" title="個(gè)人信息" >個(gè)人信息</a></li> 
<li><a href="modifypass.jsp" target="c-c-iframe" title="修改密碼" >修改密碼</a></li> 
<iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> 

js代碼：

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

 
<script type="text/javascript"> 
<!-- 
$(function(){ 
$("#c-c-iframe").load(function(){ 
$(this).height($(this).contents().find("#content").height() + 40); 
}); 
}); 
--> 
</script> 

這里的find("#content")是找出iframe內(nèi)容文檔中的id為content的高度（另外比如find("body")），并設(shè)置給iframe，
類似的還可以設(shè)置寬度，留給需要的朋友嘗試吧。
這樣就解決了iframe不會(huì)因?yàn)閮?nèi)容過大被擋住的問題（因?yàn)槲以O(shè)置了scrolling="no"）。
PS：基本上我會(huì)優(yōu)先考慮使用iframe來實(shí)現(xiàn)無刷新，兼容瀏覽器的后退按鈕；而且使用iframe加載flash是很爽的，不用寫什么js調(diào)用，object標(biāo)簽，還符合W3C標(biāo)準(zhǔn)。
2008年11月28日17:13:31 ，今天使用過程中根據(jù)實(shí)際情況進(jìn)行了一下改良，代碼如下：

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

 
<script type="text/javascript"> 
<!-- 
$(function(){ 
$("#workArea").load(function(){ 
var height = $(this).contents().find("#box").height() + 40; 
//這樣給以一個(gè)最小高度 
$(this).height( height < 400 ? 400 : height ); 
}); 
}); 
--> 
</script> 

另發(fā)現(xiàn)使用find("body")不太好使，高度不準(zhǔn)確。

您可能感興趣的文章: