三談Iframe自適應(yīng)高度代碼

2024-08-30 08:34:23

字體：大中小

供稿：網(wǎng)友

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

復(fù)制代碼

上一篇：編寫Web前端代碼的注意事項(xiàng)小結(jié)

下一篇：IE環(huán)境規(guī)定div高度必須大于字體高度的問題