快捷導(dǎo)航

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

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

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

這里介紹兩個(gè)超級(jí)簡(jiǎn)單的方法，不用寫(xiě)什么判斷瀏覽器高度、寬度啥的。

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

注意別放錯(cuò)了地方。
iframe的代碼中，注意要寫(xiě)ID，沒(méi)有ID查找不到

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

方法一：

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

//注意：下面的代碼是放在和iframe同一個(gè)頁(yè)面調(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);

});

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

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

代碼如下：

復(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;

        }

    }

}

//分頁(yè)時(shí)重新設(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) { }

    }

}