如何根據內容的大小「增長」iFrame？

Question

我正在動態加載iFrame，有些頁面比其他頁面「更高」。我希望iFrame能夠相應增長。可能嗎？如果是這樣，怎麼樣？

Answer 1

是的，這是可能的jQuery。 父頁代碼：

<iframe id='ifrm' /> 

腳本的iframe頁上：回發後

function alertSize() { 
    var myHeight = 0; 
    if (typeof (parent.window.innerWidth) == 'number') { 
    //Non-IE 
    myHeight = parent.window.innerHeight; 
    } else if (parent.document.documentElement 
    && (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight)) { 
    //IE 6+ in 'standards compliant mode' 
    myHeight = parent.document.documentElement.clientHeight; 
    } else if (parent.document.body && (parent.document.body.clientWidth || parent.document.body.clientHeight)) { 
    //IE 4 compatible 
    myHeight = parent.document.body.clientHeight; 
    } 
    //window.alert('Height = ' + myHeight); 
    return myHeight; 
} 

function AssignFrameHeight() { 
    var theFrame = $("#ifrm", parent.document.body); 
    var frameHeight1 = getIframeHeight('ifrm'); 
    var frameHeight2 = $(document.body).height(); 
    if ($(document.body)[0]) { 
    if ($(document.body)[0].bottomMargin) 
     frameHeight2 += Number($(document.body)[0].bottomMargin); 
    if ($(document.body)[0].topMargin) 
     frameHeight2 += Number($(document.body)[0].topMargin); 
    } 
    if (frameHeight1 > frameHeight2) { 
    theFrame.height(frameHeight1 - 20); 
    } else { 
    if ($.browser.msie) 
     theFrame.height(frameHeight2); 
    else 
     theFrame.height(frameHeight2 + 50); 
    } 
} 

function getIframeHeight(iframeName) { 
    //var iframeWin = window.frames[iframeName]; 
    var iframeEl = parent.document.getElementById 
    ? parent.document.getElementById(iframeName) 
    : parent.document.all 
     ? parent.document.all[iframeName] 
     : null; 
    if (iframeEl) { 
    iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous 
    //var docHt = getDocHeight(iframeWin.document); 
    // need to add to height to be sure it will all show 
    var h = alertSize(); 
    //var new_h = (h - 148); 
    //iframeEl.style.height = h + "px"; 
    return h; 
    //alertSize(); 
    } 
} 

重新分配高度：

function pageLoad() { // MS AJAX - UpdatePanel 
    AssignFrameHeight(); 
} 

$(document).ready(function() { // jQuery 
    AssignFrameHeight(); 
}); 

Answer 2

你也許可以做到像

document.getElementById('your-iframe').height=new_height; 

但如果你真的需要有一個iframe根據內容能夠生長，那麼我建議你嘗試另一個HTML元素作爲一個iframe可能不是你所需要的。

Answer 3

嘗試使用寬度：100％;身高：100％並將它們應用於您的iframe元素