[轉]讓iframe自適應高度-真正解決

原文地址:https://www.cnblogs.com/rogge7/p/7762052.html

需求：實現 iframe 的自適應高度，可以隨着頁面的長度自動的適應以避免除頁面和 iframe 同時出現滾動條的現象。 （須要只有iframe出現滾動條）

本人一開始這麼寫：會形成只有主頁面加載是設定一次。可是窗體變小或變大後不會觸發。

 $(function setIframeHeight() {
        var iframe ;//高度初始化600，爲了14寸筆記本
        iframe =document.getElementById('mainiframe');
        iframe.height=document.getElementById("sidebar").offsetHeight-56;

//        if (iframe) {
//            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
//            if (iframeWin.document.body) {
//                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
//            }
//        }
    })

轉：真正的讓iframe自適應高度 兼容多種瀏覽器隨着窗口大小改變 - CSDN博客--摘錄在下方
http://blog.csdn.net/alex8046/article/details/51456131

今天有朋友問到我關於「iframe自適應高度」的問題，本來覺得是很簡單的問題，沒想到折騰了20分鐘才搞定。期間遇到幾個問題，要麼是高度自適應了，可是當窗口改變時會出現滾動條。也就是當窗口放大時iframe沒有自動跟隨變大顯得很小，或是當窗口縮小時iframe仍是以前那麼大就出現了滾動條。還有或是高度不許確，那麼就達不到想要的效果了。

爲何須要使用iframe自適應高度呢？其實就是爲了美觀，要否則iframe和窗口長短大小不一，看起來老是不那麼舒服，特別是對於咱們這些編程的來講，如鯁在喉的感受。

首先設置樣式

body{margin:0; padding:0;}

若是不設置body的margin和padding爲0的話，頁面上下左右會出現空白。

html代碼以下

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>

下面就是今天小編寫的時候遇到的問題，考慮到有些朋友可能沒怎麼用jquery就直接用js吧。

方法一

var ifm= document.getElementById("myiframe");

ifm.height=document.documentElement.clientHeight;

這個方法能夠達到讓iframe自適應高度的效果，可是若是你將窗口放大或縮小效果就不出來了，也就是本文開頭講的。須要再次刷新，那就不屬於自適應了。

那麼問題來了，須要解決當窗口改變大小的時候執行js事件，以讓iframe自適就高度。那麼就須要將相關的代碼寫成函數，而且給iframe加上onLoad="changeFrameHeight()"，也就是下面的方法二了。

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

js代碼也得跟着改

function changeFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;

}

window.onresize=function(){  
     changeFrameHeight();  

} 

window.onresize的做用就是當窗口大小改變的時候會觸發這個事件。

因此，使用方法二就能夠完美的、真正的讓iframe自適應高度了，試試看吧，而且兼容多種瀏覽器。

==上面摘錄結束

 

====本人修改成：（方法1）

<iframe id="mainiframe" width="100%" height="600" src="/dsdd/confirm/" onload="changeFrameHeight()" frameborder="0" scrolling="auto"></iframe>

    function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight-56; //56是頭頂的高度，和網友估計不同。
    }
    $(function(){ window.onresize=function(){
            changeFrameHeight(); }}); //這裏不知道是否還要 $(function(){}) 這個閉包嗎？後證明不須要

 但要保留  window.onresize=function(){ changeFrameHeight();}

==本人 方法2  html去掉每次iframe onload都觸發計算高度，更妙 ；推薦

 <iframe id="mainiframe" width="100%" height="600" src="/dsdd/confirm/"  frameborder="0" scrolling="auto"></iframe>

  function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight-56;
    }
    window.onresize=function(){ changeFrameHeight();}
    $(function(){changeFrameHeight();});

特別聲明： changeFrameHeight() 方法裏面的計算高度要結合你的佈局，並非網上都合適你的。而且這個只有一個iframe

好比：下面的裏面有不少方法，有點頭暈。^_^

關於iframe自適應高度的方法總結 - CSDN博客
http://blog.csdn.net/hj7jay/article/details/51675692