完成所有 jquery ajax 请求后如何调整 iframe 的大小

Question

我有一个包含 iframe 的 html 文档。父文档和 iframe（wordpress 博客）中的文档在同一个域中。 iframe 在加载事件时自动调整其高度以适应其内容，如下所示：

<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>

它工作正常。但现在，该博客主要是一个带有 facebook 提要的页面，已更新为“加载更多”按钮以限制显示的帖子数量。很像无限滚动，但有一个按钮。

我想要的是能够在单击“加载更多”按钮时调整父 iframe 的大小。由于 facebook 提要是由 wordpress 插件提供的，并且它会时不时地更新，所以我不想直接弄乱它的文件。 javascript代码也被缩小了，所以对我来说看起来像是乱码。

幸运的是，它还提供了一个后台文本框来包含自定义代码。由于 jQuery 已经加载，我尝试了这个：

jQuery(document).ready(function () {
    jQuery("load-more").click(function () {
        var frame = $('#parent-iframe', window.parent.document);
        var height = jQuery('body').height();
        frame.height(height);
    });
});

它按预期工作，但有一个警告。每当触发点击事件时，该函数会在新帖子加载之前执行，因此正文高度总是落后一步。我可以添加固定数量的像素 补偿，但有些帖子比其他帖子大得多。

我不经常做这种工作，所以我需要帮助。我正在查看 jQuery 延迟对象，但老实说我有点迷茫。有人可以简单地向我解释一下它是如何工作的以及如何解决它吗？

Answer 1

感谢@jfriend00 的建议，我想我找到了一个可行的解决方案。 由于插件的 javascript 文件被缩小了，而且我不习惯 javascript 调试，所以我找不到 load-more ajax 调用的结尾。 我所需要的只是等到所有 ajax 请求都完成。所以我找到了这个帖子jquery.ajaxStop() 并尝试了这个：

jQuery(document).ready(function () {
    jQuery("load-more").click(function () {
            $(document).ajaxStop(function () {
            var frame = $('#parent-iframe', window.parent.document);
            var height = jQuery('body').height();
            frame.height(height);
            $(document).unbind("ajaxStop");
       });
   });
});

现在可以了。如果我无法更好地解释自己，请原谅我。正如我所说，我不习惯这个，所以我缺乏适当的术语和概念。如果您对帖子标题、详细信息或标签有任何建议，以便对其他人有用，我很乐意进行相应的编辑。

它也可以像这样工作并且看起来更干净：

<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight" onresize="this.height=this.contentWindow.document.body.scrollHeight"></iframe>

父 iframe

$(document).ready(function () {
        $("#load-more").click(function () {
                $(document).one("ajaxStop", function () {
                       window.parent.$("#parent-iframe").trigger('resize');
                });
        });
});

子文档 jquery