Question

我有一个包含特定网页的<iframe>。在iframed网页中，通过jQuery设置以下事件触发器：

console.log($('.myElement').trigger('testEvent'));

此事件每隔约20秒触发一次。

回到父页面，首次加载页面时，我为事件设置了一个事件处理程序：

$('iframe').load(function(){

  console.log("Iframe loaded");

  $('iframe').contents().find('.myElement').on('testEvent', function(e) {
    console.log("Event Fired!", e);
  });

});

因此，一旦加载了iframe，就会设置事件处理程序。

由于某种原因，事件处理程序永远不会运行。该事件肯定会被触发，因为我在控制台中看到了console.log()的结果。我在控制台中没有看到任何错误或任何错误。

我也可以手动触发它并看到处理程序正在运行：

$('iframe').contents().find('.myElement').trigger('testEvent');

我在这里做错了什么？

Answer 1

我明白了。因此父文档和iframe内容文档都有自己的jQuery实例。显然，jQuery的一个实例不可能（轻松地）监听由另一个jQuery实例触发的事件。我在父文档中的问题是：

$('iframe').contents().find('.myElement').on('testEvent', function(e,data) {});

这里我试图使用父jQuery来处理事件。这不行。我必须使用vanilla JavaScript：

document.getElementById('#my_iframe').contentWindow.$('.myElement').on('testEvent'), function(e,data) {});

所以我在这里使用vanilla JavaScript来获取iframe内容然后从那一点开始jQuery就是iframe的jQuery实例，它与触发器发生的jQuery实例相同。

这完美无缺！

无法捕获iframe内的jQuery DOM事件

1 个答案: