用javascript動態(tài)調(diào)整iframe高度的代碼
更新時間：2007年04月10日 00:00:00 作者：
當(dāng)你在頁面上使用了iframe之后，一般來說會不希望iframe顯示難看的滾動條，以使iframe里面的內(nèi)容和主頁面的內(nèi)容渾然一體。這時候你會設(shè)置 scrolling="no" 屬性。但是這樣一來如果iframe里面的內(nèi)容是變化的，高度會隨之內(nèi)容的變化而變化的時候，你的iframe就會顯得太長導(dǎo)致底下一大片空白，或者正好相反，由于iframe的高度太小導(dǎo)致一部分內(nèi)容會被擋住。這里我提供一個兼容IE/NS/Firefox的javascript腳本實現(xiàn)動態(tài)調(diào)整iframe的高度。如果需要調(diào)整寬度的話，原理是一樣的，本文不加詳述。
首先，在你的主頁面上必須包含以下這段javascript代碼：
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
然后對于主頁面用到iframe的地方添加代碼：
<iframe id="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0
scrolling=no src="/myiframesrc.php"
width=200 height=100></iframe>
首先，在你的主頁面上必須包含以下這段javascript代碼：
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
然后對于主頁面用到iframe的地方添加代碼：
<iframe id="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0
scrolling=no src="/myiframesrc.php"
width=200 height=100></iframe>
相關(guān)文章
這篇文章主要介紹了Javascript變量的作用域和作用域鏈詳解,本文用一個實例和運行結(jié)果來講解這兩個知識,需要的朋友可以參考下2015-04-04
微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了js獲取會話框prompt的返回值的方法,通過一個簡單的密碼判斷實例分析了js獲取會話框prompt返回值的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
關(guān)于TypeScript模塊導(dǎo)入的那些事
Typescrit的模塊機(jī)制與es6的模塊基本類似，也提供了轉(zhuǎn)換為amd，es6，umd，commonjs，system的轉(zhuǎn)換，下面這篇文章就來給大家詳細(xì)介紹了關(guān)于TypeScript模塊導(dǎo)入的那些事，需要的朋友可以參考借鑒，下面來一起看看吧2018-06-06
js 父窗口控制子窗口的行為-打開，關(guān)閉，重定位，回復(fù)
技術(shù)要點可以利用windows的open和closed來對子窗口的控制,需要父窗口和子窗口之間進(jìn)行互動。2010-04-04
不依賴Flash和任何JS庫實現(xiàn)文本復(fù)制與剪切附源碼下載
本篇文章給大家分享的文本復(fù)制與剪切板功能，實現(xiàn)此功能不依賴falsh插件和任何js庫實現(xiàn)的，感興趣的朋友一起看看吧2015-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)輪播圖的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文通過實例代碼給大家分享了基于js 實現(xiàn)移動端整屏滑動效果，基本思路是檢測手指滑動方向，獲取手指抬起時的位置，減去手指按下時的位置，得正即為向下滑動了，具體實現(xiàn)代碼大家參考下本文2017-11-11
下面小編就為大家?guī)硪黄獪\談JS之tagNaem和nodeName。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊列
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊列,隊列是只允許在一端進(jìn)行插入操作,另一個進(jìn)行刪除操作的線性表,隊列是一種先進(jìn)先出（First-In-First-Out，F(xiàn)IFO）的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2015-06-06