使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問題

更新時間：2014年12月16日 14:52:04 投稿：hebedich

這篇文章主要介紹了使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問題,需要的朋友可以參考下

這里介紹兩個超級簡單的方法，不用寫什么判斷瀏覽器高度、寬度啥的。

下面的兩種方法自選其一就行了。一個是放在和iframe同頁面的，一個是放在test.html頁面的。

注意別放錯了地方。
iframe的代碼中，注意要寫ID，沒有ID查找不到

復(fù)制代碼代碼如下:

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

方法一：

復(fù)制代碼代碼如下:

//注意：下面的代碼是放在和iframe同一個頁面調(diào)用

$("#main").load(function(){

var mainheight = $(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

方法二：

復(fù)制代碼代碼如下:

//注意：下面的代碼是放在test.html調(diào)用

$(window.parent.document).find("#main").load(function(){

var main = $(window.parent.document).find("#main");

var thisheight = $(document).height()+30;

main.height(thisheight);

});

在做項目的過程中需要使用iframe，但是iframe默認(rèn)有一個高度，超過該默認(rèn)高度的會內(nèi)容會被隱藏起來，而小于該默認(rèn)高度的內(nèi)容呢又會把默認(rèn)高度當(dāng)成內(nèi)容的高度，在經(jīng)過尋找答案的過程中，找到了怎樣去控制iframe高度自適應(yīng)

iframe自適應(yīng)高度本身是很簡單的方法，就是在頁面加載完成后，重新計算一下高度即可。

代碼如下：

復(fù)制代碼代碼如下:

//公共方法：設(shè)置iframe的高度以保證全部顯示數(shù)據(jù)

//function SetPageHeight() {

//    var iframe = getUrlParam('ifname');

//    var myiframe = window.parent.document.getElementById(iframe);

//     iframeLoaded(myiframe);

//}

var iframeLoaded = function (iframe) {

    if (iframe.src.length > 0) {

        if (!iframe.readyState || iframe.readyState == "complete") {

            var bHeight = 

            iframe.contentWindow.document.body.scrollHeight;

            var dHeight = 

            iframe.contentWindow.document.documentElement.scrollHeight;

            var height = Math.max(bHeight, dHeight);

            iframe.height = height;

        }

    }

}

//分頁時重新設(shè)置 iframe 高度 ； 修改后：iframe.name = iframe.id

var reSetIframeHeight = function()

{

    try {

        var oIframe = parent.document.getElementById(window.name);

        oIframe.height = 100;

        iframeLoaded(oIframe);

    }

    catch (err)

    {

        try {

         parent.document.getElementById(window.name).height = 1000;

          } catch (err2) { }

    }

}