當你在頁面上使用了iframe之后，一般來說會不希望iframe顯示難看的滾動條，以使iframe里面的內容和主頁面的內容渾然一體。這時候你會設置 scrolling="no" 屬性。但是這樣一來如果iframe里面的內容是變化的，高度會隨之內容的變化而變化的時候，你的iframe就會顯得太長導致底下一大片空白，或者正好相反，由于iframe的高度太小導致一部分內容會被擋住。這里我提供一個兼容IE/NS/Firefox的javascript腳本實現動態調整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;
????}
????elseif (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>
有時為了方便使用Iframe，但被潛入的頁面長度不是固定的，顯示滾動條不僅影響美觀還對用戶操作帶來不便，自動調整高度可以解決這個問題。
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
var targWin = targObj.parent.document.all[targObj.name];
if(targWin != null) {
var HeightValue = targObj.document.body.scrollHeight
if(HeightValue < 600){HeightValue = 600} //不小于600
targWin.style.pixelHeight = HeightValue;
}
}
function f_iframeResize(){
bLoadComplete = true; f_frameStyleResize(self);
}
var bLoadComplete = false;
window.onload = f_iframeResize;
</SCRIPT>
源代碼如下
<script type="text/javascript">
//** iframe自動適應頁面 **//
//輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表
//用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個窗體，則不用逗號。
//定義iframe的ID
var iframeids=["test"]
//如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏
var iframehide="yes"
function dyniframesize()
{
??var dyniframe=new Array()
??for (i=0; i<iframeids.length; i++)
??{
???if (document.getElementById)
???{
????//自動調整iframe高度
????dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
????if (dyniframe[i] && !window.opera)
????{
?????dyniframe[i].style.display="block"
?????if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape
??????dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
?????else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用戶的瀏覽器是IE
??????dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
????}
???}
???//根據設定的參數來處理不支持iframe的瀏覽器的顯示問題
???if ((document.all || document.getElementById) && iframehide=="no")
???{
????var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
????tempobj.style.display="block"
???}
??}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
使用的時候只要貼在<head></head>里面就可以了
posted on 2006-04-24 09:37
黑咖啡 閱讀(957)
評論(0) 編輯 收藏 所屬分類:
tec