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高度只有150像素，我需要展开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无法找到iframes 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

调整附加iframe的高度

1 个答案: