讓動態的 iframe 內容高度自適應

使用iframe載入其他頁面的時候，需要自適應iframe的高度

<

div 
class
>
<
iframe 
name
="iframe1"
src="iframe1.html"
frameborder
="0"
width
="100%"
>
iframe
>
<
iframe 
name
="iframe2"
src="iframe2.html"
frameborder
="0"
width
="100%"
>
iframe
>
div>

有滾動條，可以看到iframe並不會因為內容高度自動撐開

內容長這樣，但可以看到，高度定死了，沒有自適應

<

div 
class
>
<
iframe 
name
="iframe1"
onload
="this.height=this.contentwindow.document.body.scrollheight"
src="iframe1.html"
frameborder
="0"
width
="100%"
>
iframe
>
<
iframe 
name
="iframe2"
onload
="this.height=iframe2.document.body.scrollheight"
src="iframe2.html"
frameborder
="0"
width
="100%"
>
iframe
>
div>

可以發現，高度雖然能自適應，不過只支援高度了「從小到大」的自適應

如iframe2的內容比iframe1的高，後者動態載入出前者能自適應，但前者動態載入出後者就不行了，這種高度減小不了

最後的解決辦法是

可以用settimeout(fn,0)將高度設定放到下一輪事件迴圈中執行，或者在 onbeforeunload 事件中先把高度設定為auto

基本ok了，不過偶爾（可能是電腦卡了？）會看到些抖動閃動的情況

5. 要避免這個情況，可暫時將它隱藏

先設定display為none，再設定為block；或者先設定visibility為hidden，再設定為visible 。 用visibility看起來變化地更自然一點

settimeout

var iframes = document.getelementsbytagname('iframe');

for (var i = 0, j = iframes.length; i < j; ++i) , 0);
}})(i);
}

var iframes = document.getelementsbytagname('iframe');

for (var i = 0, j = iframes.length; i < j; ++i) ;
this.setattribute('height', this
.contentwindow.document.body.scrollheight);
this.style.visibility = 'visible';
= 'block';
}; })(i);
}

讓Iframe自適應高度

讓iframe自適應高度 iframe,尤其是不帶邊框的iframe因為能和網頁無縫的結合從而不重新整理頁面的情況下更新頁面的部分資料成為可能，可是 iframe的大小卻不像層那樣可以 伸縮自如 所以帶來了使用上的麻煩，給iframe設定高度的時候多了也不好，少了更是不行，現在，讓我來告訴大 家一種...

讓IFRAME自適應高度

之前自己也碰到過這個問題，為了得到答案去網上搜尋，發現有不少人也遇到了這樣的問題，現在就把解決方法共享一下 超簡單哦 1 建立乙個bottom.js的檔案，然後輸入下面的 只有兩行哦 parent.document.all 框架id名 style.height document.body.scrol...

iframe 自適應內容高度

這一陣子，又做了一些頁面前台的工作，其中有乙個地方用到了iframe載入多個頁面的情況。為了防止載入不同的內容頁面，iframe出現滾動條的情況，所以專門寫了乙個函式來調整iframe的頁面高度。做完之後，一測試，前台開發的千年老問題，又出現了，ie下面可以執行，firefox下面卻不行，最搞笑的是...