剛開通部落格不久，經常在看到前輩和大牛在部落格上分享技術經驗，就想用部落格來記錄一些遇到過的問題和解決問題的經驗。

     前兩天一朋友和我討論到用iframe內嵌網頁如何做到讓iframe自適應子頁面的高度。我之前也遇到過同樣的問題，如果iframe在不設定高度的情況下，預設高度為150px（在谷歌瀏覽器下親試，其他瀏覽器未實驗），如果iframe通過js引用其他子頁面進來也無法像div那樣通過內容的大小來改變iframe的高度問題，也就是說，內嵌子頁面的大部分內容都會被iframe外框的高度限制從而顯示不出來。

     當然如果需要切換的每個子頁面的高度都一樣的話，那麼預設iframe的高度是一種很方便有很簡單的方式，如果每個子頁面的高度不一樣，那麼就需要用js來改變iframe的高度了，由於專案中只用到一個js檔案，所有的頁面引用的都是這個js檔案，所以問題就變得比較麻煩。按理說，我們可以通過獲取子頁面的高度來設定iframe的高度，在onload方法中可以獲取到父頁面和子頁面的高度，但由於是點選式切換頁面導致this所指的物件不同，在onload方法中獲取的子頁面高度資料沒有辦法傳遞到success()方法中。在一下js方法中用console.log(this)；可以知道獲取第一個頁面高度的this物件和獲取到第二個頁面高度的this物件還有sucess()方法中的this物件都是不同的。所以利用物件儲存的方式也不行。

 這是前端程式碼：

    由於呼叫sucess()方法的物件在父視窗，所以在sucess()中的document物件是父視窗的document物件，可以直接獲取到iframe標籤物件，從而對irame標籤的高度進行設定，

以下程式碼中，two是iframe內嵌子頁面的body的id值

     由於js檔案的執行順序是通過html的呼叫來決定的，此檔案的執行順序為：

父頁面.onload --> sucess()方法 --> 子頁面.onload

   當父頁面載入完畢時呼叫onload方法，之後點選li標籤時出發sucess()方法，在sucess方法中設定跳轉頁面，當頁面跳轉完畢，子頁面載入完成時，子頁面呼叫了onload方法。

在子頁面載入時的this.parent可以獲取到父頁面的window物件，通過window物件獲取父頁面的body物件並設定body物件的高度加上子頁面的高度。之後再設定iframe標籤的高度為子頁面的高度。如果設定iframe高度不設定父頁面的body高度的話，iframe的高度會因為body物件的高度受限制而顯示不出來。