基於內容設置iFrame的寬度和高度

Question

目前我有一個jQuery的iframe模式對話框，它打開一個ASPX頁面。該頁面包含另一個帶有jQuery的iFrame。內容iframe沒有設置任何高度或寬度，因此根據內部內容的大小進行調整。外部jQuery iframe模式不會根據其中的內容iframe進行大小設置。 這裏是打開模態代碼：

function openModal() { 

    var horizontalPadding = 30; 
    var verticalPadding = 30; 
    var jqurl = "ContentPage.aspx"; 
    var title = "Modal Title"; 
    jQuery('<iframe scrolling="no" id="cLaunch" class="cLaunch" src="' + jqurl + '" frameborder="0"/>').dialog({ 
     title: title, 
     modal: true, 
     resizable: true, 
     position: ['center', 50], 

     fluid:true, 
     overlay: { 
      opacity: 0.5, 
      background: "grey" 
     } 

    }); 
} 

setInterval(function() { 
    document.getElementById("cLaunch").style.width = document.getElementById("cLaunch").contentWindow.document.documentElement.scrollWidth + 30 + 'px'; 
    document.getElementById("cLaunch").style.height = document.getElementById("cLaunch").contentWindow.document.body.scrollHeight + 'px'; 


}, 1000) 

ConentPage.aspx：

<iframe name="contentloader" id="contentloader" frameborder="0" scrolling="no"></iframe> 

任何幫助，將不勝感激。

Answer 1

嘗試使用此方法設置寬度和iframe的高度，基於所述iframe內加載的內容

$("#cLaunch").load(function() { 
    $(this).height($(this).contents().find("body").height()); 
    $(this).width($(this).contents().find("body").width()); 
});