用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼
更新時(shí)間：2007年04月10日 00:00:00 作者：
當(dāng)你在頁面上使用了iframe之后，一般來說會(huì)不希望iframe顯示難看的滾動(dòng)條，以使iframe里面的內(nèi)容和主頁面的內(nèi)容渾然一體。這時(shí)候你會(huì)設(shè)置 scrolling="no" 屬性。但是這樣一來如果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)整寬度的話，原理是一樣的，本文不加詳述。
首先，在你的主頁面上必須包含以下這段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ì)于主頁面用到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>
然后對(duì)于主頁面用到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)文章
webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
RequireJS 和 Sea.js 都是模塊加載器，倡導(dǎo)模塊化開發(fā)理念，核心價(jià)值是讓 JavaScript 的模塊化開發(fā)變得簡(jiǎn)單自然。這篇文章給大家簡(jiǎn)單介紹了Require.js與Sea.js的區(qū)別，感興趣的朋友一起看看吧2018-08-08
JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下2018-10-10
javascript與asp.net(c#)互相調(diào)用方法
js與C#之間相互調(diào)用的一些方法2009-12-12
本文主要對(duì)常見的完全錯(cuò)誤的隨機(jī)排列算法進(jìn)行介紹分析，并介紹了經(jīng)典的隨機(jī)排列算法，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
獲取JAVASCRIPT時(shí)間戳函數(shù)的5種方法
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過實(shí)例化時(shí)間對(duì)象new?Date()?來進(jìn)一步獲取當(dāng)前的時(shí)間戳,JavaScript處理時(shí)間主要使用時(shí)間對(duì)象Date,本文對(duì)js時(shí)間戳函數(shù)獲取方法給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
所謂的條件渲染就是判斷是否需要把代碼渲染到展示頁面上,下面這篇文章主要給大家介紹了關(guān)于微信小程序條件渲染的相關(guān)資料,文中通過實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
javascript下利用數(shù)組緩存正則表達(dá)式的實(shí)現(xiàn)方法
利用組存大法要提高我們程序的性能，讓我們的正則表達(dá)式的創(chuàng)建于執(zhí)行更有效率。2009-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01