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