如何找到循环迭代完成-从外部的网页与Iframes页面

How to find the loop iteration done - from outside of the web page with Iframes page?

本文关键字：从外部 网页 页面 Iframes 何找 循环 迭代      更新时间：2023-09-26

我想知道当我的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浏览器控制台。

我创建了这个小提琴来尝试回答这个问题。以下是我所做的:

  1. 添加此处理程序，当迭代完成时运行:

    var onIterationDone = function() { console.log("Iteration Done"); alert("Done!"); };

  2. 将此处理程序连接到button2上的自定义事件iterationDone，然后添加:

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);

    • 这是你想要达到的目标吗?
    相关文章：