[JS]iframe根据子页面自动调整大小

摘自：.Net Club(http://www.96gc.com）

在网页布局中，经常会涉及到类似于下面这种布局，像一些Crm系统，MIS系统。。。。

众所周知，iframe是一个内嵌的浏览器，通常要求iframe完全显示子页面，不带滚动条，根据子页面自动调整高度。这是个很典型的例子，在项目开发中经常遇到这种样式的布局，我的原则是看再多的书都不如在实战中得来的实际，所以借此机会把一些经常碰到的问题总结一下，以便以后再开发中可以事半功倍，那么就跟大家分享下“自动调整iframe大小”的JS代码：

?

//定义变量，存储iframe的ID列表

var iframeids=["pframe"];

//判断浏览器是否支持iframe,yes支持,no则不支持

var iframehide="yes";

 

function dyniframesize()

{

    var dyniframe=new Array();

     

    for(var 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

以下是HTML页面调用：

?

<iframe id="pframe" name="pframe" scrolling="no" src="notebook/index.asp" frameborder="0"  width="660" onload="dyniframesize()"> </iframe>

呵呵，如果大家有更好的办法，可以随时给我回复，我会及时改进此文，淘小鸡。