Javascript 在多次提交后固定iframe高度

我有一个带有公式的网站，每次用户点击提交按钮时，一个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编码，但这会增加接收内容的数量

---

提前感谢。

此css和javascript可用于页面上的所有iFrame。它会调整iFrame的大小每当内容发生更改时，您也可以将

.load

替换为

.change

css:

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
        });
    });
});

---

sry，我试过你的代码，但没用。outerHeight返回与高度相同的值，问题仍然存在。顺便说一句，我在Internet Explorer上测试了这个，也许这对你有所启示。唯一的区别是，我没有使用.animate（）而使用.css（），但这并不重要。因为我们没有相同的查询版本，我使用这个：我也是，1.10.2，你尝试过使用.change而不是.load吗？即使我这样做，它仍然是一样的

$(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
        });
    });
});