解決各種情況下的iframe高度自適應內容

xialong 發布于2019-08-30 15:53 / 837人閱讀

摘要：自適應高度，其實就是設置的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。這個時候又有幾種情況了。我們使用下的另一個頁面來做代理，通過它獲取頁面的高度，并設定元素的高度。

JS自適應高度，其實就是設置iframe的高度，使其等于內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網站美觀起著重要作用。
如果內容是固定的，那么我們可以通過CSS來給它直接定義一個高度，同樣可以實現上面的需求。當內容是未知或者是變化的時候。這個時候又有幾種情況了。

iframe內容未知，高度可預測

這個時候，我們可以給它添加一個默認的CSS的min-height值，然后同時使用javascript改變高度。常用的兼容代碼有：

// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setIframeHeight(document.getElementById("external-frame"));
};

多個iframe的情況下

針對知道的iframe的ID調用

function iframeAutoFit(iframeObj) {
        setTimeout(function () {
            if (!iframeObj) return;
            iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
        }, 200)
    }

內容寬度變化的iframe高度自適應

跨域下的iframe自適應高度

跨域的時候，由于js的同源策略，父頁面內的js不能獲取到iframe頁面的高度。需要一個頁面來做代理。

方法如下：假設www.a.com下的一個頁面a.html要包含www.b.com下的一個頁面c.html。我們使用www.a.com下的另一個頁面agent.html來做代理，通過它獲取iframe頁面的高度，并設定iframe元素的高度。
a.html中包含iframe:

在c.html中加入如下代碼：

最后，agent.html中放入一段js:

agent.html從URL中獲得寬度值和高度值，并設置iframe的高度和寬度（因為agent.html在www.a.com下，所以操作a.html時不受JavaScript的同源限制）

GPU云服務器云服務器 iframe高度自適應 iframe自適應高度高度自適應高度適應內容

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

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

解決各種情況下的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高度自適應問題

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

leone 2019-08-22 16:43 評論0 收藏0
真正解決iframe高度自適應問題

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

littleGrow 2019-08-02 10:16 評論0 收藏0