剛開通博客不久，經常在看到前輩和大牛在博客上分享技術經驗，就想用博客來記錄一些遇到過的問題和解決問題的經驗。
前兩天一朋友和我討論到用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對象都是不同的。所以利用對象存儲的方式也不行。
這是前端代碼：
之後通過查詢資料得知contentDocument屬性可以直接獲取iframe內嵌子頁面的document對象（contentDocument詳細用法參考：http://blog.csdn.net/alex8046/article/details/51456098）
由於調用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對象的高度受限制而顯示不出來。