頁面佈局-iframe 高度 自適應問題

菜單 部分 爲 父頁面，點擊之後使用iframe 引入 子頁面，最初時 子頁面高度 有誤，故記錄如何如何調整 高度的方法：

結構如下：

<!--主體內容-->
<div class="main" id ="rightMain" >
<iframe  frameborder="0" width="100%" height="100%" name="rightFrame" scrolling="no"id="rightFrame"></iframe>
</div>

一：在 父頁面設置子頁面高度 如下

1：加載時 自動設置高度（根據子頁面內容-body）

// 設置高度  加載的過程中 設置
$('#rightFrame').load(function() {   
   var iframeHeight=$(this).contents().find("body").height();  
  // alert("height:"+iframeHeight);
   $(this).height(iframeHeight+'px');   
})

2：點擊菜單後 再次設置

function changeSonSize(){

   var iframeHeight=$("#rightFrame").contents().find("body").height();  
  // alert("height:"+iframeHeight);
   $("#rightFrame").height(iframeHeight+'px');   

}

點擊事件後調用：changeSonSize();

二：在子頁面設置子頁面高度

需要設置的原因是 可能在最初load 子頁面時 已經設置了高度，但是 在子頁面 操作部分功能後子頁面的高度 發生變化，而這時由沒有重新設置高度，所以 會發生頁面 高度不和諧的現象，那麼該如何解決呢？ 我給的方案有兩個 1.給定 將要高度變化的容器一個高度，這樣 在最初加載時就會設定，後面操作就不會改變容器高度；2.再操作完 改變容器高度 時，再重新設定一下子頁面（當前頁面）的高度，通過調用 父頁面的方法即可：

// 改變 頁面大小

function changeSize(){

window.parent.changeSonSize();
}

這樣就會重新根據子頁面內容高度，重新設定了。