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

【问题标题】：How can you set a window.onload event that fires when all dynamically added iframes are loaded?如何设置在加载所有动态添加的 iframe 时触发的 window.onload 事件？
【发布时间】：2015-02-19 09:55:38
【问题描述】：

我想设置一个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
  });
});

【问题讨论】：

iframe 有它自己的window，你想要那个加载事件。 $('iframe').on('load...'

标签： javascript jquery dom iframe

【解决方案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');
  });
});

【讨论】：

查看我对其他答案的评论。我会更新问题来解释。
我可能错了，但该代码不会等待加载时间更长的帧，对吗？
它现在会默默地失败，如果你想在前四个完成加载后加载 5，只需在 loadEvent 处理程序中的 if 语句的 else 部分添加一个 setTimeout，如果这就是你需要的. - jsfiddle.net/sahilbatla/4wbpbjbo/4

【解决方案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。

【讨论】：

如何检查页面上的所有iframes 是否已加载？
我不确定我是否遵循。上面的代码将为每个动态插入的 iframe 执行 loaded() 函数中的任何内容。您无法真正“检查” iframe 是否已加载，但是您可以在加载后执行一些代码。
假设我添加了第五个iframe。只有当iframes 1,2,3,4 和 5 都被加载时，我才想运行一个函数。您的代码只是将处理程序连接到每个iframe。如果iframe 5 在iframe 2 之前完成加载怎么办？在这种情况下，您的代码会运行，但我不希望它运行。
您希望它静默失败，还是希望所有回调依次执行？
如果iframe 5 在iframe 2 之前完成加载，我只想让它等到iframe 2 加载，然后运行一个函数。