Question

在jquery中，我想基本上这样做：

$(window).on('load', 'iframe', function() {
    alert(this);
});

这可能吗？我想在iframe动态添加到DOM并且完成加载的任何时候运行一个函数。

Answer 1

当一个新的iframe被动态添加到DOM时，你还必须动态地为它创建一个新的事件处理函数。这是规则，没有什么可以改变它。

Answer 2

嗯，我相信这可以通过MutationObserver和jQuery的事件绑定的组合来实现。

您可以像这样注册观察者到DOM（从here借来的示例代码）：

$(function() {
  var target = document.querySelector('body');

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // Check if nodes are added
      if (mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach(function(node) {
          // Check if the added node is an iframe
          if (node.nodeName === "IFRAME") {
            $(node).on("load", function() { alert("hello from iframe"); });
          }
        });
      }
    });
  });

  // configuration of the observer (need to research more on this)
  var config = {
    attributes: true,
    childList: true,
    characterData: true
  };

  // pass in the target node, as well as the observer options
  observer.observe(target, config);
});

以上将观察DOM中的更改，并将动态检查添加到DOM的元素。

我相信您可以利用此功能将运行时事件绑定到添加的iframe，就像我上面所做的那样。

在您完成此操作后，别忘了忘记：

observer.disconnect();

如何在jquery中设置iframe加载事件的事件委托？

2 个答案: