三談Iframe自適應高度代碼

2024-08-30 08:34:23

字體：大中小

來源：轉載

供稿：網友

在構建B/S系統界面的時候，經常會遇到主頁面index.html中嵌套其他頁面的情況，雖然已經有的庫已經提供了控件(例如jQuery easy UI),但是有時候iframe的使用是不可避免的,這篇文章應該給你一個相對來說比較實用的答案,正象文章所說,互聯網上的大部分東西都是垃圾或者是不可相信的！原文有KOUBEI UED 由校整理！
為什么是三談
為什么是三談呢？一是因為這真的是一個被說爛的話題，二是因為太師傅在n年前就寫過這篇再談iframe自適應高度。之所以再提該問題，是因為之前項目中確實遇到了這個問題的方方面面，有必要總結一下。希望對各位有幫助，有錯誤請指正。
同域、子頁面高度不會動態增加
這種情況最簡單，直接通過腳本獲取字頁面實際高度，修改iframe元素高度即可。但有二點必須注意：
如果頁面內有絕對定位或者沒有清浮動的元素，情況有些復雜，不同瀏覽器處理結果不同，甚至包括Webkit內核的瀏覽器，具體請看這個Demo。所以你要么進行瀏覽器檢測，要么用Math.max計算一個最大值，要么你想別的方法。
iframe所包含頁面可能非常大，需要很長的加載時間，為此直接計算高度的時候，很可能頁面還沒下載完，高度計算就會有問題。所以最好在iframe的onload事件中計算高度。這里還要注意的是，IE下必須使用微軟事件模型obj.attachEvent來綁定onload事件。而別的瀏覽器直接obj.onload = function(){}也可以。

復制代碼

上一篇：編寫Web前端代碼的注意事項小結

下一篇：IE環境規定div高度必須大于字體高度的問題