如何可靠地检测跨域 iframe 内的点击？

如何检测 Iframe 内的用户点击

挑战：

确定用户是否在 iframe 内单击可能具有挑战性，尤其是当 iframe 源自不同域时（称为跨域 iframe）。

解决方案：

要检测 iframe 内的点击，可以采用巧妙的解决方法，使用位于直接上方的不可见 div iframe 的边界。当用户点击 iframe 内的任意位置时，div 会拦截点击事件并将其转发到 iframe。

实现：

在主文档中，创建以下内容elements:

<div>
<p>然后，插入以下 JavaScript代码：</p>
<pre class="brush:php;toolbar:false">const message = document.getElementById("message");

window.focus();

window.addEventListener("blur", () => {
  setTimeout(() => {
    if (document.activeElement.tagName === "IFRAME") {
      message.textContent = "clicked " + Date.now();
      console.log("clicked");
    }
  });
}, { once: true });

说明：

1. window.focus() 确保主文档具有焦点以启用模糊事件侦听器。
2. window.addEventListener("blur", ...) 捕获模糊事件，该事件在焦点移离主窗口时发生document.
3. 在模糊监听器中，setTimeout 用于稍微延迟事件处理，以确保浏览器已更新其内部状态。
4. document.activeElement 检查是否有活动元素在main document 是一个 IFRAME，表明点击发生在 iframe 内。
5. 如果确认，#message div 的 textContent 将更新为当前时间戳，并且将显示 console.log 消息。

此技术提供了一种可靠的方法来跟踪用户是否在 iframe 内单击，即使是跨域也是如此。