快捷導(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)問(wèn)題。

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

失敗的測(cè)試就不說(shuō)了，來(lái)直接的。
兩個(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)容過(guò)大被擋住的問(wèn)題（因?yàn)槲以O(shè)置了scrolling="no"）。
PS：基本上我會(huì)優(yōu)先考慮使用iframe來(lái)實(shí)現(xiàn)無(wú)刷新，兼容瀏覽器的后退按鈕；而且使用iframe加載flash是很爽的，不用寫(xiě)什么js調(diào)用，object標(biāo)簽，還符合W3C標(biāo)準(zhǔn)。
2008年11月28日17:13:31 ，今天使用過(guò)程中根據(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)確。

您可能感興趣的文章:

相關(guān)文章

jQuery按需加載輪播圖(web前端性能優(yōu)化)
這篇文章主要介紹了jQuery按需加載輪播圖(web前端性能優(yōu)化)知識(shí),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
使用jQuery異步加載 JavaScript腳本解決方案
這篇文章主要介紹了如何使用jQuery異步加載JavaScript腳本,需要的朋友可以參考下
2014-04-04
基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
一張圖片點(diǎn)擊鼠標(biāo)放大，再點(diǎn)縮小基于jquery1.8.3實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-09-09
jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
這篇文章主要介紹了jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?涉及jquery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-02-02
jquery動(dòng)態(tài)添加帶有樣式的HTML標(biāo)簽元素方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加帶有樣式的HTML標(biāo)簽元素方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
這篇文章主要介紹了jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法,涉及jQuery定時(shí)函數(shù)操作及日期與實(shí)現(xiàn)的運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
jquery原創(chuàng)彈出層折疊效果點(diǎn)擊折疊彈出一個(gè)層
今天整理最近項(xiàng)目里用到的一個(gè)小效果，點(diǎn)擊折疊彈出一個(gè)層給用戶填寫(xiě)信息，感興趣的朋友可以學(xué)習(xí)下
2014-03-03
基于jQuery滑動(dòng)桿實(shí)現(xiàn)購(gòu)買日期選擇效果
這是一款基于jQuery的滑動(dòng)桿購(gòu)買日期選擇插件，它的外觀仿的是阿里云的服務(wù)器購(gòu)買日期選擇界面。這款jQuery插件非常適合在一些虛擬產(chǎn)品購(gòu)買頁(yè)面上使用，它可以幫助你的用戶快速選擇產(chǎn)品的購(gòu)買日期，感興趣的朋友跟著小編學(xué)習(xí)吧
2015-09-09
加載列表時(shí)jquery獲取ul中第一個(gè)li的屬性
通過(guò)jquery獲取ul中第一個(gè)li的屬性，當(dāng)加載列表時(shí)，默認(rèn)希望選中第一條，下面是具體的實(shí)現(xiàn)代碼
2014-11-11
jQuery通過(guò)Ajax返回JSON數(shù)據(jù)
最近在使用JQuery的ajax方法時(shí)，要求返回的數(shù)據(jù)為json數(shù)據(jù)，在處理的過(guò)程中遇到下面的幾個(gè)問(wèn)題，那就是采用不同的方式來(lái)生成json數(shù)據(jù)的時(shí)候，在$.ajax方法中應(yīng)該是如何來(lái)處理的，下面依次來(lái)進(jìn)行說(shuō)明。
2015-04-04