Check if all/multiple iframes are loaded-CodePudding

I am currently trying to run a function when all iframes on the page are loaded. I am using jQuery, but it only works when there is one iframe on the page. Once I start having mutiple iframes my functionality stops working. Here is the code im working with:

    $('iframe.preview-iframe').on( 'load', function() {
        $('iframe.preview-iframe').contents().find('section[rowposition] a').each(function(){
            // Append a span tag with the href of the according content a tag
            $(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">'   $(this).attr('href')   '</span>');
        });
    });

Do I need to write a loop that looks over how many iframes I have and then only run the script once the last iframe is loaded or is there some other way to do it?=

CodePudding user response：

You can do something like the following:

Get all the iframes elements in a variable
Loop through each of the iframes and if all of them are loaded, execute your required code.

$(window).on('load', function() {
  var iframes = $('iframe');
  var loaded = 0;
  iframes.each(function() {
    $(this).on('load', function() {
      loaded  ;
      if (loaded == iframes.length) {
        // run your code here
        $('iframe').each(function() {
          $(this).contents().find('section[rowposition] a').each(function() {
            // Append a span tag with the href of the according content a tag
            $(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">'   $(this).attr('href')   '</span>');
          });

        });
      }
    });
  });
});