網頁設計技巧:iframe自適應高度的問題

2024-08-30 08:34:53

字體：大中小

來源：轉載

供稿：網友

可能有人還沒接觸到這個問題過，先說明一下，什么是自適應高度吧。所謂iframe自適應高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe。如果iframe始終調用同一個固定高度的頁面，我們直接寫死iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做DOM動態操作，這時候，就需要程序去同步iframe高度和被包含頁的實際高度了。
順便說下，iframe在迫不得已的時候才去用，它會給前端開發帶來太多的麻煩。
傳統做法大致有兩個：
方法一，在每個被包含頁在本身內容加載完畢之后，執行JS取得本頁面的高度，然后去同步父頁面的iframe高度。
方法二，在主頁面iframe的onload事件中執行JS，去取得被包含頁的高度內容，然后去同步高度。
在代碼維護角度考慮，方法二是優于方法一的，因為方法一，每個被包含頁都要去引入一段相同的代碼來做這個事情，創建了好多副本。
兩個方法都只處理了靜的東西，就是只在內容加載的時候執行，如果JS去操作DOM引起的高度變化，都不太方便。
如果在主窗口做一個Interval，不停的來獲取被包含頁的高度，然后做同步，是不是即方便，又解決了JS操作DOM的問題了呢？答案是肯定的。
Demo頁面：主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html
主頁面代碼示例：

復制代碼

上一篇：如何制作百度死鏈文件的方法介紹

下一篇：網頁色彩對比與調和技巧分享