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)題。
復(fù)制代碼 代碼如下:
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)確。
您可能感興趣的文章:
- js代碼判斷瀏覽器種類IE、FF、Opera、Safari、chrome及版本
- 使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧
- JavaScript無(wú)提示關(guān)閉窗口(兼容IE/Firefox/Chrome)
- 解決javascript:window.close()在chrome,Firefox下失效的問(wèn)題
- 如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開(kāi)此面嗎?”
- 完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- 兼容IE、FireFox、Chrome等瀏覽器的xml處理函數(shù)js代碼
- jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- chrome瀏覽器當(dāng)表單自動(dòng)填充時(shí)如何去除瀏覽器自動(dòng)添加的默認(rèn)樣式
- js chrome瀏覽器判斷代碼
- json格式化/壓縮工具 Chrome插件擴(kuò)展版
- 解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問(wèn)題
- JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)(兼容IE、FireFox、Chrome)
- 禁止選中文字兼容IE、Chrome、FF等
- javascript判斷chrome瀏覽器的方法
- Chrome擴(kuò)展頁(yè)面動(dòng)態(tài)綁定JS事件提示錯(cuò)誤
- Chrome開(kāi)發(fā)者工具9個(gè)調(diào)試技巧詳解
相關(guān)文章
jQuery 練習(xí)[二] jquery 對(duì)象選擇器(1)
根據(jù) id 選擇(通過(guò) id 只能選擇一個(gè)對(duì)象), 如: $("#div2") ,jquery 對(duì)象選擇器是jquery的一個(gè)亮點(diǎn)。2010-05-05jQuery實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實(shí)現(xiàn)代碼,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn)
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫(xiě)過(guò)ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery,所以又用jquery重新寫(xiě)了個(gè),需要的朋友可以參考下2014-06-06JSON JQUERY模板實(shí)現(xiàn)說(shuō)明
用JSON從服務(wù)器端返回?cái)?shù)據(jù)已是大家公認(rèn)的標(biāo)準(zhǔn),因?yàn)樗绦【?使用方便.2010-07-07jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來(lái)越火了,作為一個(gè)WEB程序開(kāi)發(fā)者要是不會(huì)這個(gè)感覺(jué)就要落伍,甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開(kāi)發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保??!2009-11-11JQuery 獲取和設(shè)置Select選項(xiàng)的代碼
JQuery獲取和設(shè)置Select選項(xiàng)2010-02-02