教你用jquery實現(xiàn)iframe自適應高度
更新時間：2014年06月11日 11:11:25 作者：
iframe因為能和網(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分數(shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時候多了也不好，少了更是不行，今天我們就來分享2種使用jquery實現(xiàn)iframe自適應高度的代碼
iframe代碼，注意要寫ID
復制代碼 代碼如下:
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代碼一：
復制代碼 代碼如下:
//注意：下面的代碼是放在test.html調(diào)用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代碼二：
復制代碼 代碼如下:
//注意：下面的代碼是放在和iframe同一個頁面調(diào)用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
您可能感興趣的文章:
相關(guān)文章
JQuery里面的方法大多是返回JQuery對角.而Is（）方法，返回的一個布爾值2012-05-05
本文給大家介紹jquery鼠標滑過點擊事件音效試聽，使用jquery插件實現(xiàn)的特效，感興趣的朋友一起來學習吧。2015-08-08
jQuery dataTables與jQuery UI 對話框dialog的使用教程
這篇文章主要介紹了jQuery dataTables與jQuery UI 對話框dialog的使用教程的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
本文主要對handlebars+require基本使用方法進行詳細介紹，文章尾部會附上完整代碼供大家參考。需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了jQuery基于擴展實現(xiàn)的倒計時效果,涉及jQuery擴展的使用與時間操作的相關(guān)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)百分比記分進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
JQuery jsonp 使用示例，想學習的朋友可以參考下。2009-08-08
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果。2011-08-08
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個jquery的擴展，這樣就可以很容易實現(xiàn)對textarea控制最大長度了。2011-09-09
jQuery 函數(shù)實例分析【函數(shù)聲明、函數(shù)表達式、匿名函數(shù)等】
這篇文章主要介紹了jQuery 函數(shù),結(jié)合實例形式分析了jquery函數(shù)聲明、函數(shù)表達式、匿名函數(shù)等相關(guān)使用技巧,需要的朋友可以參考下2020-05-05