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)