Question

我是一个带有iframe的简单html页面

<html>
<head>
$('#page-wrapper').ajaxStop(function() {
  console.log("Page Loaded Completely." );
});
</head>
<body>
    <h3>Demo page<h3>
    <iframe id="page-wrapper" src="#company/profile"></iframe>
</body>

我希望在每个XMLHttpRequest完成iframe中的页面后执行一段java脚本。我找到了一种方法，可以使用ajaxStop等待所有ajax请求，但控制台消息很早就会打印出来，并且它不会等待一个ajax请求完成。

文档就绪或加载也不起作用，因为页面没有用单个html文件响应，它更像是单页面应用程序，其中dom很早就可用，然后请求大量资源文件在页面最终完成之前，有大约40-50个ajax请求。

我正在寻找Chrome Dev Tools之类的内容 - ＆gt;网络标签和类型＆＃34;是：运行＆＃34;在过滤器中，您只会收到待处理的请求。能够让我计算活跃请求数量的东西。

Answer 1

jQuery的ajaxStop是一个全局事件处理程序，应该附加到document级别。

jQuery的$.ajax在$.ajax用于执行XMLHttpRequest时会在内部触发这些事件，并且事件与on()绑定，因此它们应该冒泡，但可能只到最近的文档/ window level，它将是iframe的contentWindow。

您需要做的事情可能是

$(function() {
    $('#page-wrapper').on('load', function() {
        var win = iframe.contentWindow || iframe;
        var doc = iframe.contentDocument || iframe.contentWindow.document;

        $(doc).ajaxStop(function() {
             // catch ajax in iframe
        });
    });
});

这当然要求iframe来自同一个来源，并且不会被同源政策阻止。

Answer 2

如果自2020年起进行更新，但 iframe 内的 ajaxStop（）仍然存在问题，此方法最终可以解决问题：

[
  {'panelist_login': 'pradeep', 
  'login': None, 
  'firstname': None, 
  'lastname': None, 
  'gender': None, 
  'age': '0'}, 
  {'panelist_login': 'kumar', 
  'login': 'kumar', 
  'firstname': 'kumar', 
  'lastname': 'Pradeep', 
  'gender': None, 
  'age': '24'}
 ]

在该线程中，使用$('#my-iframe-id').load(function(){ var instance = this.contentWindow.jQuery, doc = this.contentWindow.document; instance(doc).ajaxStart(function(){ console.log('ajaxStart'); }); instance(doc).ajaxStop(function(){ console.log('ajaxStop'); }); instance(doc).ajaxComplete(function(){ console.log('ajaxComplete'); }); });作为iframe ID

事件监听器等待iframe中的所有XMLHttpRequest

2 个答案: