将 eventlistener 应用于 iframe - Javascript

在Web开发中，iframe通常用于嵌入其他网站的内容或将一个网页嵌入到另一个网页中。如果我们想要监测嵌入在iframe中的内容的事件，就需要将event listener应用于iframe上。

使用parent对象

首先，我们需要在父窗口中获得iframe对象。我们可以使用parent.querySelector()或parent.getElementById()等方法。请注意，这些方法将在父元素中搜索与给定id或选择器匹配的第一个元素。

var iframe = parent.querySelector('iframe');

接下来，我们需要为iframe添加事件监听器。例如，我们想要在点击iframe中的任何按钮时，执行一个函数:

iframe.contentWindow.document.body.addEventListener('click', function(){
  console.log('Button Clicked');
});

请注意，我们使用contentWindow.document获得iframe的内部文档，然后将事件监听器添加到文档的body元素上。

使用iframe元素

如果我们无法在父元素中找到iframe对象，我们可以直接在iframe元素上添加事件监听器。例如，我们想要在iframe中的任何按钮上单击时执行一个函数:

var iframe = document.querySelector('iframe');
iframe.addEventListener('load', function(){
  iframe.contentWindow.document.body.addEventListener('click', function(){
    console.log('Button Clicked');
  });
});

在这个例子中，我们在iframe元素上添加了一个load事件监听器，在iframe加载完成时执行该函数。在该函数中，我们获取iframe的文档并向其中添加事件监听器。

总而言之，添加到iframe上的事件监听器可以让我们在iframe中监测事件并执行相应的操作。但是，请注意安全问题，不能在iframe中访问跨域资源。