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提要的博客已经更新了“加载更多”按钮，以限制显示的帖子数量。就像一个无限的卷轴，但有一个按钮。

我想要的是能够在“load-more”按钮单击上调整父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);
    });
});

它按预期工作但有一点需要注意。每当触发click事件时，在新帖子加载之前执行该函数，因此身高始终落后一步。我可以添加固定数量的像素补偿，但有些职位比其他职位要大。

我不经常这样做，所以我需要帮助。我正在查看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

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

1 个答案: