javascript - 实时检测 iframe 页面加载

Question

我有一个包含一些 iframe 的 div 元素。有时，我会销毁这些 iframe 并创建一个新的，但我总是需要知道它们中的每一个（以及后来添加的）何时完成加载。我认为以下代码可以工作，但调试控制台中没有任何记录。有什么帮助吗？

  // doesn't work
  $('#viewport').on('load', 'iframe', function() {
    console.log('LOADED!');
    return true;
  });

  // doesn't work either
  $('#viewport').on('ready', 'iframe', function() {
    console.log('LOADED!');
    return true;
  });

Answer 1

我非常相信动态 iframe 无法做到这一点。来自 jQuery 站点（在已弃用的load()函数下：

注意： .live() 和 .delegate() 方法不能用于检测 iframe 的加载事件。load 事件没有正确地冒泡父文档，并且 event.target 不是由 Firefox、IE9 或 Chrome 设置的，这是执行事件委托所必需的。

我也无法进行类似的项目。

Answer 2

可能是框架在您添加事件之前完成加载。

在将事件添加到 DOM 之前尝试添加事件。

var iframe = document.createElement("iframe");
// set iframe properties
$(iframe ).on('ready', 'iframe', function() {
  console.log('LOADED!');
});
document.body.appendChild(iframe);