快捷導(dǎo)航

javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)高度和寬度

更新時(shí)間：2014年07月18日 15:08:12 投稿：whsnow

這篇文章主要介紹了javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下

javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度---推薦使用jQuery的代碼！

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

基于Jquery庫(kù)的代碼很好實(shí)現(xiàn)：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#mainframe").load(function(){ 
$(this).height(0); //用于每次刷新時(shí)控制IFRAME高度初始化 
var height = $(this).contents().height() + 10; 
$(this).height( height < 500 ? 500 : height ); 
}); 
}); 
</script>

‍基于JS原生代碼的實(shí)現(xiàn)：

<script language="javascript"> 
if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script>

只需在你被iframe調(diào)用的文件</body>之后加入上面這段即可!
這個(gè)也可以控制iframe的高度隨內(nèi)容的多而自動(dòng)增長(zhǎng)

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>

jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度

您可能感興趣的文章:

相關(guān)文章

Jquery跨域獲得Json時(shí)invalid label錯(cuò)誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候，經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來(lái)的 json 值，一般跨域用到的兩個(gè)方法為：$.ajax 和 $.getJson
2011-01-01
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來(lái)和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用
2011-01-01
七個(gè)不允許錯(cuò)過(guò)的jQuery小技巧
這篇文章主要介紹了七個(gè)不允許錯(cuò)過(guò)的jQuery小技巧，幫助WEB開發(fā)人員開發(fā)出有創(chuàng)意和漂亮的WEB頁(yè)面,需要的朋友可以參考下
2015-12-12
JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼。可直接復(fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery中closest和parents的區(qū)別分析
本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹，在jquery中parents()查找父級(jí)元素刪除的時(shí)候，發(fā)現(xiàn)它不包含根元素，于是用了closest()，效果不錯(cuò)，下面我來(lái)給大家具體的介紹一下
2015-05-05
jQuery位置選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery位置選擇器用法,結(jié)合實(shí)例形式分析了jQuery位置選擇器的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-06-06
jQuery基礎(chǔ)知識(shí)小結(jié)
本文主要通過(guò)jQuery基礎(chǔ)知識(shí)、選擇要操作的元素及處理DOM元素3個(gè)方面給我們做了下小結(jié)，非常的詳盡，推薦給有需要的小伙伴。
2014-12-12
Jquery定義對(duì)象(閉包)與擴(kuò)展對(duì)象成員的方法
這篇文章介紹了Jquery定義對(duì)象(閉包)與擴(kuò)展對(duì)象成員的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
jQuery+css3動(dòng)畫屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點(diǎn)圖特效，代碼很簡(jiǎn)單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。
2015-03-03