国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解決各種情況下的iframe高度自適應(yīng)內(nèi)容

xialong / 829人閱讀

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

JS自適應(yīng)高度，其實就是設(shè)置iframe的高度，使其等于內(nèi)嵌網(wǎng)頁的高度，從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網(wǎng)站美觀起著重要作用。
如果內(nèi)容是固定的，那么我們可以通過CSS來給它直接定義一個高度，同樣可以實現(xiàn)上面的需求。當(dāng)內(nèi)容是未知或者是變化的時候。這個時候又有幾種情況了。
iframe內(nèi)容未知，高度可預(yù)測 
這個時候，我們可以給它添加一個默認的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調(diào)用 
function iframeAutoFit(iframeObj) {
        setTimeout(function () {
            if (!iframeObj) return;
            iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
        }, 200)
    }
內(nèi)容寬度變化的iframe高度自適應(yīng)
跨域下的iframe自適應(yīng)高度 
跨域的時候，由于js的同源策略，父頁面內(nèi)的js不能獲取到iframe頁面的高度。需要一個頁面來做代理。

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116671.html

相關(guān)文章

  • 解決各種情況下的iframe高度自適應(yīng)內(nèi)容

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

    alexnevsky 評論0 收藏0

  • 解決各種情況下的iframe高度自適應(yīng)內(nèi)容

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

    Leo_chen 評論0 收藏0

  • 真正解決iframe高度自適應(yīng)問題

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

    leone 評論0 收藏0

  • 真正解決iframe高度自適應(yīng)問題

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

    littleGrow 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<