如何添加在将某种类型的元素添加到 DOM 时触发的事件侦听器？

我想在当前窗口中创建新的 iframe 时调用特定方法。这是 youtube iframe 播放器，每当在当前窗口中创建或启用新的 iframe 时，我都需要收听它。可以做类似的事情吗？请告诉我是否有任何方法。我已尝试以下代码，但此代码不会检测到动态创建的新 iframe。我尝试在谷歌但没有得到任何信息

const iframes = document.getElementsByTagName('iframe');
  forEach(iframes, (iframe) => {
        addEventListeners(iframe);

      }
    }
  });

您可以使用MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。它可以让你监听 DOM 的变化；就像您在 dom 本身上设置一个事件侦听器，并侦听何时将 iFrame 添加到其中：

(new MutationObserver(mutations => {
    mutations[0].addedNodes.forEach(node => {
        if (node.tagName.toLowerCase() === 'iframe') {
            //do stuff
        }
    });
})).observe(document.body, {childList: true});

我们在这里聆听document.body，并且我们只监听其子节点的更改（添加或删除节点）。这forEach遍历每个添加的节点（如果有）并检查它是否是iFrame。如果是，则在“do stuff”行中执行您需要执行的操作。