捕获 iframe 上的点击事件

Question

我试图做类似的事情

<div onClick={()=>{ console.log(captured)}}>
  <iframe />
</div>

不管用。 看起来 iframe 不允许这样做。

有什么建议吗？

Answer 1

这是完全正常的； 事件在 dom 树内冒泡，iframe 有它自己的 dom 树，因此不会在它之外冒泡事件。

您的设置如何？ 如果您控制 iframe 中的内容，您可以使用发布消息 API 在 iframe 和父级之间进行通信，检查：

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

如果您不控制它，那么您可能会检测到父 window 上的模糊事件，而不是 iframe 上的点击事件。

希望这可以帮助

Answer 2

无法从父页面读取 iframe 内容 (DOM)。

有一个名为IframeTracker的 jQuery 插件。 这应该可以解决您的问题。 您可以查看 GitHub 页面了解更多详细信息。

Answer 3

如果您有权访问iframe并对其进行控制，则可以创建一个js文件并执行以下操作并将其放入iframe和父 window 中：

(function() {
  if (window.location != window.parent.location) {
    window.document.addEventListener('click', window.parent.iframe_clicked);
  }
})();

function iframe_clicked(event) {
  console.log("wow, no kiddin!");
}

当然还有其他方法，例如通过设置服务器和ajax并通过网络进行此操作，它们也有自己的用途。

还有postMessage ，其他人已经提到过，所以我将跳过解释它。