jquery - jQuery .each 循环暂停 iframe 以完全加载

Question

我需要暂停 .each 循环，让 iframe 有时间加载。有没有办法做到这一点？我研究了回调等等，但没有运气。我不想超时，因为我需要确保 iframe src 完全加载。

$.ajax({
  type:'post',
  traditional: true,
  url: '/Reportedit/exportPdfCharts',
  dataType: 'json',
  cache: 'false',
  contentType: 'application/json; charset=utf-8',
  success: function(data) {

    $.each(data, function() {

        var url = "/Reportedit/createonechart";

        $("#iframe-chart").attr("src", url);

        //NEED TO PAUSE HERE UNTIL iframe source has completely loaded.


    });

  }
});

Answer 1

我假设，因为您的代码似乎表明这种情况，您正在更新相同的 iframe 源，而不是不同的源。无论哪种方式，您都可以修改下面的代码，但它是针对同一个 iframe 的。

您可以只检测每次更新源时触发的加载事件，并在加载事件函数中递归调用相同的函数，直到到达数组的末尾

$.ajax({
    ...
    success: function(data) {
      loadFrame(data, 0);
    }
 });


function loadFrame(arr, i) {
   //tell it what to do when the frame loads, but just once, since we
   //are incrementing i
   $('#iframe-chart').once('load', function(){
     if (i<arr.length) { loadFrame(arr, i++); }
   });
   var url = "/Reportedit/createonechart"; 
   //you'll need some logic here to figure out which url to load
   $("#iframe-chart").attr("src", url);
 });