通過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頁面：主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html
主頁面**示例：
一直執行，效率會不會有問題？
我做了測試，同時開5個視窗（ie6、ie7、ff、opera、safari）執行這個**，不會對cpu有什麼影響，甚至調整到2ms，也沒影響（基本維持在0%佔用率）。
下面談談各瀏覽器的相容性問題，如何獲取到正確的高度，主要是對body.scrollheight和documentelement.scrollheight兩個值得比較。注意本文用的是這個doctype，不同的doctype應該不會影響結果，但是假如你的頁面沒有申明doctype，那還是先去加乙個吧。
在主頁面追加以下測試**，以輸出這兩個值，**示例：
check height
被載入頁面，可以切換乙個絕對定位的層，來使頁面高度動態改變。如果層展開，則會撐高頁面高度。**示例：
toggle overlay
下面列出以上**在各瀏覽器的測試值：
（bheight = body.scrollheight, dheight = documentelement.scrollheight, 紅色 = 錯誤值, 綠色 = 正確值）
/ 層隱藏時 層展開時
bheight dheight bheight dheight
ie6 184 184 184 303
ie7 184 184 184 303
ff 184 184 184 303
opera 181 181 300 300
safari 184 184 303 184
暫且無視opera比別人少3畫素的問題…可以看出，如果沒有絕對定位的東西，兩個值是相等的，取哪個都無所謂。
但是如果有，那麼各個瀏覽器的表現不太相同，單取哪個值都不對。但可以找到了一條規律，那就是取兩個值得最大值可以相容各瀏覽器。所以我們的主頁面**就要改造成這樣了：
function reinitiframe()catch (ex){}
} window.setinterval("reinitiframe()", 200);這樣子，基本解決了相容性問題。順便說下，不光絕對定位的層會影響到值，float也會導致兩個值的差異。
如果你演示demo後，會發現，除了ie，其他瀏覽器中，當層展開後再隱藏，取到的高度值還是維持在展開的高度303，而非隱藏回去的真正值184，就是說長高了之後縮不回去了。這個現象在不同被包含頁面之間做切換也會發生，當從高的頁面切換到矮頁面的時候，取到的高度還是那個高的值。
可以歸納為，當iframe窗體高度高於文件實際高度的時候，高度取的是窗體高度，而當窗體高度低於實際文件高度時，取的是文件實際高度。因此，要想辦法在同步高度之前把高度設定到乙個比實際文件低的值。所以，在iframe的新增 οnlοad=」this.height=100″，讓頁面載入的時候先縮到足夠矮，然後再同步到一樣的高度。
這個值，在實際應用中決定，足夠矮但又不能太矮，否則在ff等瀏覽器裡會有很明顯的閃爍。dom操作的時候主頁面無法監聽到，只能dom操作完了之後把高度變小了。
在我的乙個實際專案中，在成本和收益之間權衡，我並沒有做這個事情，因為每個dom函式中都要插入這個**，代價太高，其實層縮回去不縮掉也不是那麼致命。包括demo裡，也沒有去做這個事情。如果讀者有更好的方法，請告訴我。
這是最終的主頁面的**：
附demo頁面： 主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html
js控制巢狀iframe大小
形如 login.do?method cent1 width 100 border 0 frameborder 0 marginwidth 1 marginheight 1 align left scrolling no 右邊一列，插入操作介面框架。可能你轉向後的頁面頁面hight大於iframe的...
關於控制下拉列表的JS控制
文字框有readonly屬性，直接設定 下拉框沒有readonly屬性，也不能通過其他屬性進行唯讀的設定，下拉框只有disabled屬性，但是這個屬性設成true之後，值就獲取不到了 網上搜了一下，大部分是控制滑鼠 鍵盤事件，來控制唯讀的 即 不讓下拉框獲取焦點 如下 1 2其中 nm usem v...
iframe與父頁面中JS執行順序控制
同事遇到了乙個問題 父頁面中有幾個iframe，初衷是父頁面的js通過ajax獲取資料，然後用於初始化iframe頁面，可以結果卻是有的iframe頁面卻不能獲得資料。問題根源 父頁面在載入iframe的時候，也會執行js 二者執行完成先後順序並不可控，而iframe卻要使用js獲取的資料，導致在i...