iframe框架页中的高度自适应

【转载】框架页中的高度自适应：

 

　　在实际使用iframe的过程中，会遇到iframe高度的问题。由于被嵌套的页面大小不固定而出现滚动条。采用JavaScript来控制iframe元素的高度，让iframe高度自适应。另外，由于JavaScript对不同域名下权限的控制，会遇到同域、跨域的情况。

　　 １、同域下的Iframe高度自适应

　　控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。

<script type="text/javascript">
function SetCwinHeight()
{
    var iframeid=document.getElementById("iframeid"); //iframe id
    if (document.getElementById)
    {
        if (iframeid && !window.opera)
        {
            if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
                iframeid.height = iframeid.contentDocument.body.offsetHeight;
            }
            else if(iframeid.Document && iframeid.Document.body.scrollHeight)
            {
                iframeid.height = iframeid.Document.body.scrollHeight;
            }
        }
    }
}
</script> 

 页面框架代码：

<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="demo.html"></iframe>

 

　　 2、不同域下的Iframe高度自适应

　　主页面与被嵌套页面不同域时，涉及到权限问题，要规避JavaScript的跨域限制。

　　具体操作，可参考以下资料中的实验性实例代码，可行性有待考证。

 

参考：①.关于iframe页面高度自适应的问题( http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html)

　　　②.Iframe高度自适应( http://www.ccvita.com/376.html)