实时检测 iframe 页面加载答案

【问题标题】：Live Detect iframe page onload实时检测 iframe 页面加载
【发布时间】：2012-05-22 03:33:08
【问题描述】：

我有一个包含一些 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;
  });

【问题讨论】：

load 仅适用于图像，不是吗？
nope api.jquery.com/load-event 它也适用于窗口、框架、iframe 等
试用：$('#viewport').on('load' , function() { console.log('LOADED!'); return true; });

标签： javascript jquery dom iframe

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：