js控制iframe自適應高度

通過Google搜尋iframe 自適應高度，結果5W多條，搜尋iframe 高度自適應，結果2W多條。我翻了前面的幾十條，刨去大量的轉載，有那麼三五篇是原創的。而這幾篇原創裡面，基本上只談到如何自適應靜的東西，就是沒有考慮到JS操作DOM之後，如何做動態同步的問題。另外，在相容性方面，也研究的不徹底。這篇文章，希望在這兩個方面再做一些深入。可能有人還沒接觸到這個問題過，先說明一下，什麼是自適應高度吧。所謂iframe自適應高度，就是，基於介面美觀和互動的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe。如果iframe始終調用同一個固定高度的頁面，我們直接寫死iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做DOM動態操作，這時候，就需要程式去同步iframe高度和被包含頁的實際高度了。順便說下，iframe在迫不得已的時候才去用，它會給前端開發帶來太多的麻煩。 傳統做法大致有兩個：方法一，在每個被包含頁在本身內容載入完畢之後，執行JS取得本頁面的高度，然後去同步父頁面的iframe高度。方法二，在首頁面iframe的onload事件中執行JS，去取得被包含頁的高度內容，然後去同步高度。在代碼維護角度考慮，方法二是優於方法一的，因為方法一，每個被包含頁都要去引入一段相同的代碼來做這個事情，建立了好多副本。兩個方法都只處理了靜的東西，就是只在內容載入的時候執行，如果JS去操作DOM引起的高度變化，都不太方便。如果在主視窗做一個Interval，不停的來擷取被包含頁的高度，然後做同步，是不是即方便，又解決了JS操作DOM的問題了呢？答案是肯定的。 Demo頁面：首頁面 首頁面程式碼範例：

Check HeightToggle Overlay