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

Posted 2023-05-09

【中文标题】完成所有 jquery ajax 请求后如何调整 iframe 的大小

【英文标题】：How to resize an iframe after all jquery ajax requests are done

【发布时间】：2017-11-22 01:35:05

【问题描述】：

我有一个包含 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 延迟对象，但老实说我有点迷茫。有人可以简单地向我解释一下它是如何工作的以及如何解决它吗？

【问题讨论】：

我不确定你想要什么...你希望上面的工作代码执行，但是有延迟？

我不知道这是否有帮助，但这确实已经存在：github.com/davidjbradshaw/iframe-resizer

@mjw 本身不是延迟，而是在“加载更多”按钮功能完成后按顺序进行。

@mkaatman 谢谢，我会看看它。但我也想知道是否以及如何单独使用 jQuery 来完成

您需要知道load-more 按钮的代码何时完成工作。由于这不是内容的初始加载，它必须是某种 Ajax 调用。如果它没有公开任何告诉您该 ajax 调用何时完成的信息，那么除了轮询内容以查看它何时被更改（这是一个丑陋的 hack）之外，您真的无能为力。你能告诉我们处理load-more按钮的常规代码吗？

【参考方案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   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

【讨论】：

这样做的一个问题是，每次单击按钮时您都将注册一个新的.ajaxStop() 处理程序，并且它们会累积。

再次感谢 @jfriend00 $(document).unbind("ajaxStop"); 应该这样做对吗？