【同域】根據iframe中引用的網頁的高度來修改父級頁面的iframe高度-iframe自適應子頁高度

如題。

        網上提供了很多方法。但是在進行測試的時候都會出現這樣那樣的問題。在一個好同學的協助下，我使用了這種方法來實現了這個功能。

        在父級頁面iframe元素外部使用一個<div>元素包圍住。然後設定<div>的初始高度不需要設定，設定好寬度，然後被包圍的iframe的高度寬度均設定為100%；你也可以不用div，直接通過子頁中的方法來修改父級頁面iframe的高度。

        

 <!--main begin-->   <div id="iframeHeight">//注意要在css設定好寬度，高度可放空     <iframe id="carMainBox" name="carMainBox" src="dongguan.html" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   </div><!--main end-->

        在被引用的子頁中，添加如下的window.inload()函數：

<!--更新外框高度window.load代碼--><script type="text/javascript">window.onload=function(num){  try{ var s = parent.document.getElementById('iframeHeight')||null;}catch(e){}        //是否擷取到了div的這個元素，如果擷取到了，則設定他的高度為內頁高度再加上50px的靈活空間 s?s.style.height = document.body.offsetHeight +50+'px':'';} </script>

         這個方法可以相容chrome，IE，firefox，safari等主流瀏覽器。

          注意這個函數的必須要在子頁面的高度確定之後執行，否則其高度則會出現不完全的效果。我們可以添加一個延時函數來實現消極式載入onload函數。

         在父頁面調用下面的方法來強行重新整理iframe中的子頁面。

setTimeout(function(){sonPage.window.onload();},500);

          sonPage會預設get到iframe的裡頁。然後執行onload函數，500是延時的時間長度，單位是毫秒。