如何在所有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 feed的博客已经更新为“加载更多”按钮，以限制显示的帖子数量。就像一个无限的滚动，但有一个按钮。

我想要的是能够调整在“加载更多”按钮，单击父iframe中。由于facebook feed是由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