0

I would like to know when my iteration completes from outside of my web page, where my iteration happening inside of a frame's child iframe

here my example: Live URL click first button and second button wait 3 sec.

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

});

After the place had all lis how to I know from outside of the document. I am running my code from chrome browser console.

3gwebtrain
  • 14,640
  • 25
  • 121
  • 247

1 Answers1

0

I have created this fiddle to attempt to answer this question. Here's what I have done:

  1. Added this handler to run when the iteration is complete:

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

  2. Wired this handler to a custom event iterationDone on button2 right after it's added:

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

  1. Fired the custom event as soon as the iteration is done:

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

Is this what you wanted to achieve ?

Dhananjay
  • 544
  • 3
  • 7
  • No this is all wrong. because you are triggering the event from inside of the loop. I don't have any control over the functions. all I need is, I require to hear from outside of the functions. – 3gwebtrain Sep 29 '16 at 08:36
  • I don't understand 'I require to hear from outside of the functions'. What does that mean? The event is triggered when the `for` loop terminates. When and where would you like it to be triggered? – Dhananjay Sep 29 '16 at 08:53
  • actually this functions is running inside of a web page( not my web site ), adding my `js` file ( dynamically ) in to that web page i require to add some works, after all this loop done - got me? ( this is customer requirement same domain not CROS issues or anything) – 3gwebtrain Sep 29 '16 at 08:55
  • OK, maybe [this post](http://stackoverflow.com/questions/7434685/event-when-element-added-to-page) might help, you can check the number of `
  • ` elements added to the part of the DOM you are interested in and if there are no more updates in a given interval, you can conclude that the updating is finished?
    • – Dhananjay Sep 29 '16 at 09:06
  • yes, I require this kind of approach only. for my kind of issue how to handle, since all are inside of Iframe – 3gwebtrain Sep 29 '16 at 09:30