javascript - 如何从iframes页面的网页外部查找完成的循环迭代？

我想知道何时iteration从我的网页外部完成，我的迭代发生在frame's子iframe内部

这是我的示例：Live URL单击第一个按钮，第二个按钮等待3秒钟。

$(function(){

  var total = 1000;
  var i = 0;

  var iterate = function(){

    setTimeout(function(){

      var place = $('#iFrame1').contents().find('#iFrame2').contents().find('body');
      place.append('<ul class="list"></ul>');

      for(i=0; i < total; i++) {
        place.find('.list').append('<li>'+i+'</li>');
      }

    }, 3000);
    //how to find all this done from outside of this function?
  }

  var iFrame1 = $('<iframe />', {id:'iFrame1'});

  var iFrame2 = $('<iframe />', {id:'iFrame2'});

  var button2 = $('<button />', {text:'Child Button', click:iterate});

  var button = $('<button />',
    {
      text:'Click Me',
      click:function(){

        $(this).parents('body').append(iFrame2);

        $('#iFrame1').contents().find('#iFrame2').contents().find('body').append( button2 );

      }

    }
  );


  setTimeout(function(){
    $('.container').append( iFrame1 );
    $('#iFrame1').contents().find('body').append(button);

  },1000);

});

place包含所有li后，我如何从文档外部知道。我正在从Chrome浏览器控制台运行代码。

最佳答案

我创建了this fiddle来尝试回答这个问题。这是我所做的：


添加了此处理程序以在迭代完成时运行：

var onIterationDone = function() { console.log("Iteration Done"); alert("Done!"); };
添加该处理程序后，将其连接到iterationDone上的自定义事件button2：


var button = $('<button />', { text: 'Click Me', click: function() { $(this).parents('body').append(iFrame2); $('#iFrame1').contents().find('#iFrame2').contents().find('body').append(button2); button2.on('iterationDone', onIterationDone); }});


迭代完成后立即触发自定义事件：

setTimeout(function() { var place = $('#iFrame1').contents().find('#iFrame2').contents().find('body'); place.append('<ul class="list"></ul>'); for (i = 0; i < total; i++) { place.find('.list').append('<li>' + i + '</li>'); }
// Trigger the custom event.
button2.trigger('iterationDone'); }, 1000);


这是您想要实现的目标吗？