网上收集的关于iframe的自适应高度代码js的

<一>这个是我第一个用的不是很灵验,也没去研究:代码-->

1<iframe name="ifrName" src="targetName.htm" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['ifrName'].style.height=ifrName.document.body.scrollHeight" ></iframe>
<二>这个现在正在用,感觉很管用,perfect!:code-->
<iframe name="main" src="Welcome.aspx" frameborder="0" width="100%" onload="this.height=this.contentWindow.document.body.scrollHeight"
                allowtransparency
="true" scrolling="no"></iframe>
<三>还有个比较狠的,听说在FF也管用,暂时不考虑那个只贴出来 code -->
第一步 js部分
function getSize() {
       var xScroll, yScroll;       
       if (window.innerHeight && window.scrollMaxY) {       
              xScroll = document.body.scrollWidth;
              yScroll = window.innerHeight + window.scrollMaxY;
       } else if (document.body.scrollHeight > document.body.offsetHeight){       // all but Explorer Mac
              xScroll = document.body.scrollWidth;
              yScroll = document.body.scrollHeight;
       } else {       // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
              xScroll = document.body.offsetWidth;
              yScroll = document.body.offsetHeight;
       }
       var windowWidth, windowHeight;
       if (self.innerHeight) {       // all except Explorer
              windowWidth = self.innerWidth;
              windowHeight = self.innerHeight;
       } else if (document.documentElement && document.documentElement.clientHeight) {       // Explorer 6 Strict Mode
              windowWidth = document.documentElement.clientWidth;
              windowHeight = document.documentElement.clientHeight;
       } else if (document.body) {       // other Explorers
              windowWidth = document.body.clientWidth;
              windowHeight = document.body.clientHeight;
       }       
       // for small pages with total height less then height of the viewport
       if(yScroll < windowHeight){
              pageHeight = windowHeight;
              y = pageHeight;
       } else { 
              pageHeight = yScroll;
              y = pageHeight;
       }
       if(xScroll < windowWidth){       
              pageWidth = windowWidth;
       } else {
              pageWidth = xScroll;
       }
       arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
       return arrayPageSize;
}
这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽
function autoHeight(pid) {
       var x = new getSize();
       parent.document.getElementById(pid).height=x[1];
}
这段代码用来实现父页面中iframe的高度自适应
\\\\\\\\\\
第二步 页面部分
<div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。
<body onload="autoHeight('infrm')"></body>
在body中利用onload事件,将自身的高度传给父页面的iframe。
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/10616.htm

<四>这个是个比较劣质的东西,说是在根目录下管用,嘿嘿  this is code:
<script type="text/javascript">
function SetWinHeight(obj)
{
    
var win=obj;
    
if (document.getElementById)
    
{
        
if (win && !window.opera)
            
{
                
if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight;
                
else if(win.Document && win.Document.body.scrollHeight)
                win.height 
= win.Document.body.scrollHeight;
            }

    }

}

</script> 
<iframe frameborder="0" name="win" id="win" src="index.html" onload="Javascript:SetWinHeight(this)" align="top" width="100%" scrolling="no"></iframe>

posted @ 2008-05-17 14:02  Longkin  阅读(592)  评论(1编辑  收藏  举报