調整附加iframe的高度

Question

我正在創建一個頁面，允許人們上傳文件，然后可以在瀏覽器中直接對其進行編輯。 到目前為止，我已經創建了一個上傳表單，該表單在提交時通過將iframe附加到div上將內容加載到iframe中。

提交表單后，將運行以下jquery：

setTimeout(function() {
    $('.email-body').append('<iframe id=\"emailframe\" scrolling=\"no\" src=\"email/index.html\" width=\"800\" name=\"myFrame\"></iframe>');
    $('.emailUploadArea').fadeOut();
    $('.email-body').fadeIn();
}, 50);

這部分工作正常； 上傳表單消失，並且iframe出現，其中包含電子郵件。

問題是出現的iframe高度僅為150px，我需要將iframe展開以顯示其中的整個文件。 當iframe為靜態而不是附加時，我正在使用此jquery。

function resizeIframe() {
    var iframe_content = $("#emailframe").contents().find('body');
    $("#emailframe").css({
        height: iframe_content.outerHeight(true)
    });
    iframe_content.resize(function() {
        var elem = $(this);
        $("#emailframe").css({
            height: elem.outerHeight(true)
        });
    });
}

但這不再起作用，我認為這是因為jquery找不到iframe ID，因為它實際上不存在。

有人可以告訴我如何執行此操作，以便附加的iframe可以調整自身大小以顯示整個文件。

謝謝

Answer 1

與其附加一個包含iframe定義的字符串，不如嘗試首先動態創建一個並保存對其的引用：

var myIframe = $('<iframe id="myFrame" name="myFrame">');
myIframe.appendTo('body');

這樣，您將獲得對它的引用，它將使您能夠修改所需的任何屬性！

http://jquery-howto.blogspot.com/2010/02/dynamically-create-iframe-with-jquery.html