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

Question

我有一个 html 文档，里面有一个 iframe。父文档和 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 feed 的页面，已经更新了一个 "load-more" 按钮来限制 post 显示的数量。很像无限滚动，但有一个按钮。

我想要的是能够在 "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);
    });
});

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

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

Answer 1

感谢 @jfriend00 的建议，我想我已经找到了一个可行的解决方案。由于插件 javascript 文件被缩小并且我不习惯 javascript 调试，所以我找不到 load-more ajax 调用的结尾。然后我需要做的就是等到所有 ajax 请求都完成。所以我找到了这个 post 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");
       });
   });
});

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

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

<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>

parent iframe

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

child 文件 jquery

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

How to resize an iframe after all jquery ajax requests are done

javascript

ajax

iframe

jquery

jquery-deferred