Question

我想设置一个window.onload事件。我想动态地将iframes添加到页面中。每次加载iframe时，我都想要触发window.onload。我怎么能这样做？

编辑：假设我添加了第5个iframe。我只想在iframes 1,2,3,4和5全部加载时运行一个函数。我不能只为每个iframe添加处理程序，因为如果iframe 5在iframe 2之前完成加载会怎么样？

以下不起作用：

http://codepen.io/anon/pen/emzbZj?editors=101

HTML

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>
  <body>
    <button>add</button>
    <iframe src="http://www.w3schools.com"></iframe>
  </body>
</html>

的JavaScript

$(document).ready(function() {
  $('button').on('click', function() {
    $('<iframe src="http://www.w3schools.com"></iframe>').insertAfter('button');
  });
  $(window).on('load', function() {
    console.log('loaded'); // doesn't fire when dynamically added iframes load
  });
});

Answer 1

在这里，我希望这个小提琴按你的预期工作

http://jsfiddle.net/sahilbatla/4wbpbjbo/

$(document).ready(function() {
  $('button').on('click', function() {
      $('<iframe src="http://www.w3schools.com"></iframe>').on('load',function() {
        alert('loaded')
      }).insertAfter('button');
  });
});

Answer 2

您需要加入iframe的加载事件。这应该有效：

function loaded(){
  console.log('loaded');
}

$('button').on('click', function() {
  var iframe = $('<iframe src="http://www.w3schools.com"></iframe>');
  iframe.insertAfter('button');
  iframe.load(function(){
    loaded();
  });
});

$(window).on('load', function() {
  loaded();
});

<强>更新：

我想等待其他帧首先加载（根据你的编辑），你可以这样做：

var queue = [];

function loaded(){
  console.log(queue);
  console.log("Loaded");
}

function updateQueue(){
  var frameNo = $("iframe").length;
  queue.push(frameNo);
  processLoadEvent(frameNo); 
}

function processLoadEvent(frameNo){
  if (queue.length === frameNo){
    loaded();
  } else {
    setTimeout(function(){ processLoadEvent(frameNo); }, 500);
  }
}

$('button').on('click', function() {
  var iframe = $('<iframe src="http://www.w3schools.com"></iframe>');
  iframe.insertAfter('button');
  iframe.load(function(){
    updateQueue();
  });
});

// Your initial iframe
$("iframe").on("load", updateQueue);

这里是demo。

如何设置在加载所有动态添加的iframe时触发的window.onload事件？

2 个答案: