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

leone 發布于2019-08-22 16:43 / 587人閱讀

摘要：歡迎指出問題或留言加深本文的深度，例如已經不需要聲明，但是我解決這個問題不得不改一下，退化到，為什么在中子頁面和的高度不是由內部的內容決定的，而是等于父元素的高度

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.文檔聲明的重要性

將子頁面的文檔聲明改為就好了

4.demo

父頁面：a.html

./flexiframe.js

// 使用前先將子頁面文檔聲明改為
//
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的高度關系）

5.總結

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

GPU云服務器云服務器 iframe高度自適應 iframe自適應高度高度自適應 textarea自適應高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94598.html

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

摘要：歡迎指出問題或留言加深本文的深度，例如已經不需要聲明，但是我解決這個問題不得不改一下，退化到，為什么在中子頁面和的高度不是由內部的內容決定的，而是等于父元素的高度 1.前言解決iframe高度自適應問題有兩種方法1.pym2.手動設置iframe的高度本文主要是總結第二種實現方式，因為第一種pym.js插件我沒用懂如果使用iframe時，遇到以下的需求： iframe的高度始...

littleGrow 2019-08-02 10:16 評論0 收藏0
解決各種情況下的iframe高度自適應內容

摘要：自適應高度，其實就是設置的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。這個時候又有幾種情況了。我們使用下的另一個頁面來做代理，通過它獲取頁面的高度，并設定元素的高度。 JS自適應高度，其實就是設置iframe的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網站美觀起著重要作用。如果內容是固定的，那么我們可以通過CSS來給它直接定義一個高度，同...

alexnevsky 2019-08-01 17:46 評論0 收藏0
解決各種情況下的iframe高度自適應內容

摘要：自適應高度，其實就是設置的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。這個時候又有幾種情況了。我們使用下的另一個頁面來做代理，通過它獲取頁面的高度，并設定元素的高度。 JS自適應高度，其實就是設置iframe的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網站美觀起著重要作用。如果內容是固定的，那么我們可以通過CSS來給它直接定義一個高度，同...

Leo_chen 2019-08-21 16:58 評論0 收藏0
解決各種情況下的iframe高度自適應內容

摘要：自適應高度，其實就是設置的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。這個時候又有幾種情況了。我們使用下的另一個頁面來做代理，通過它獲取頁面的高度，并設定元素的高度。 JS自適應高度，其實就是設置iframe的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網站美觀起著重要作用。如果內容是固定的，那么我們可以通過CSS來給它直接定義一個高度，同...

xialong 2019-08-30 15:53 評論0 收藏0