真正解決iframe高度自適應問題

yuezhongbao發表於2019-02-16

1.前言

解決iframe高度自適應問題有兩種方法
1.pym
2.手動設定iframe的高度

本文主要是總結第二種實現方式，因為第一種pym.js外掛我沒用懂

  • 如果使用iframe時，遇到以下的需求：

    • iframe的高度始終等於嵌入頁面內容的高度，而不是螢幕的高度
    • 右側不允許出現兩個滾動條
    • iframe的高度自適應不僅僅是指剛載入進來時，也有可能嵌入內容的高度會隨點選變化（如：下拉選單，左側導航欄等）
    • 頁面可能同時嵌入多個iframe

2.contentWindow物件

*需要起個服務，不要直接在本地開啟

這是個只讀屬性，返回指定的iframe的window物件

拿到這個物件，就可以根據正常網頁的方法拿到嵌入（子）網頁的文件高度，然後把值附給父頁面的iframe的height。

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

為了監測網頁高度是否因為點選了某個下拉按鈕高度變化，我們建立一個定時器任務，這樣一直監視著子網頁的高度。

 setInterval(function () {
            setIframeHeight($(`#iframe`)[0])
        }, 200)

頁面有可能同時存在多個iframe

$(".flexiframe").each(function (index) {//iframe公用類名：flexiframe
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

如果此時，你發現當子頁面高度變高時，高度可以自適應的變高，但在變低時，會發現父頁面的高度並沒有向我們想象的隨著子頁面降低，導致底部留有大面積空白的問題，請繼續往下看

3.文件宣告的重要性

  • 將子頁面的文件宣告改為就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4.demo

父頁面：a.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a</title>
</head>

<body style="background-color:red">
    <iframe id="iFrame" class="flexiframe" src="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe>
    <!-- <iframe id="iFrame1" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <!-- <iframe id="iFrame2" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="./flexiframe.js"></script>
</body>

</html>

./flexiframe.js

// 使用前先將子頁面文件宣告改為
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

子頁面b.html，分別註釋兩種宣告方式，點選變大變小按鈕看一下右側滾動條的變化，（細節可以F12看一下iframe種的html和body跟div的高度關係）

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<div id="b_conntent">
        <div style="width:100px;background-color:blue">
                <div style="height:2000px">
                        <button id="btn">小</button>
                </div>
        </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $(`#btn`).on(`click`, function () {
                if ($(this).text() == `小`) {
                        $(this).text(`大`).parent().css(`height`, `200px`)
                } else {
                        $(this).text(`小`).parent().css(`height`, `2000px`)
                }
        })
</script>

5.總結

1.有時間還是要了解下html的進化歷史。
2.本文flexiframe.js可以直接使用，但是隻支援同源下父頁面可以通過contentWindow獲取子頁面的內容高度，跨域的下次再說。
3.歡迎指出問題或留言加深本文的深度，例如html5已經不需要宣告DTD，但是我解決這個問題不得不改一下DOCTYPE，退化到html4，為什麼在html5中子頁面html和body的高度不是由內部的內容決定的，而是等於父元素iframe的高度？

相關文章