Question

我有一个Formular网站，每当用户点击提交按钮时，iframe将加载所请求的内容（由PHP脚本创建的图像），iframe将适应内容宽度。我用了这段代码：

var frame = document.getElementById("resultframe");
var doc = frame.contentDocument || frame.document || frame.contentWindow.contentDocument;
var height = $(doc).height();
$(frame).animate(
    {height: height  + "px"}
)

所以代码检查内容高度并调整到该高度。但在我请求一个大图像和一个小图像后，我发现内容高度（$（doc）.height（）或doc.body.scrollHeight）不会改变到新的内容高度，高度只会变大内容大于以前的内容（它永远不会变少）。那有什么方法可以解决这个问题吗？我也考虑过AJAX，但你不能用它来获取图像，除非你使用base64编码，但这会增加收到的内容量。

提前感谢。

Answer 1

这个css和javascript可以用于页面上的所有iframe。每当内容发生变化时，它会调整iframe的大小，您也可以将.load替换为.change。

的CSS：

iframe {border:0; overflow:hidden;}

的javascript：

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

多次提交后修复iframe高度

1 个答案: