iFrame高度自適應解決方案

 

web開發的工作中我們難免會遇到使用iFrame這個標籤，有時候iFrame的高度我們要讓它自動的去適應內容的高度，防止出現捲軸，利於頁面的美化。這裡樣本個使用JavaScript使iFrame自動適應高度的方法。

   Default頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>iframe如何在頁面中使用JS自訂高度</title></head><body>    <div>        <ul>            <li>ifrmae要在下面的li標籤裡自動適應高度</li>            <li>                <iframe id="myFrame" frameborder="0" marginheight="0" marginwidth="0" src="myI.aspx">                </iframe>            </li>        </ul>    </div></body></html>

 

子頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>這個頁面是要嵌入Default.aspx的子頁面</title></head><body>    <form id="form1" runat="server">    <div style="height: 300px; width: 400px; border: 1px dashed #000;">        這個DIV高300寬400    </div>    </form></body></html>

看到Default頁面裡的IFrame高度都沒有設定。

        <script type="text/javascript">            //獲得ID為DIVr的標籤高和寬            var h = document.getElementById("div").offsetHeight;            var w = document.getElementById("div").offsetWidth;            //獲得父頁面的iFrame標籤                var iframe = window.parent.document.getElementById("myFrame");            iframe.style.width = w + "px";            iframe.style.height = h + "px";        </script>

 

在default頁面寫一個function

例如

Function helloword(){

 

Alert('您好');

}

 

子頁面調用方法

Window.parent.helloword();