如何使用 JavaScript 检测跨域 iFrame 内的点击？

使用 JavaScript 捕获跨域 iFrame 中的点击

由于安全限制，检测跨域 iFrame 中的用户交互可能具有挑战性。但是，可以使用创造性的方法来跟踪 iframe 内是否发生了点击。

解决方案：

要从 iframe 捕获点击事件，请考虑以下方法：

1.创建一个不可见的 div：

将一个不可见的 div 直接放在 iframe 上。此 div 将捕获 iframe 内的任何点击。

2.利用窗口模糊事件：

当用户在 iframe 内单击时，会导致父窗口失去焦点。通过监听窗口模糊事件，您可以检测点击。

3.检查活动元素：

在模糊事件处理程序中，检查活动元素是否为 IFRAME。如果是，则点击发生在 iframe 内。

4.通知事件：

更新指定元素，例如

，以指示 iframe 中发生了点击。

代码片段：

下面的例子演示了如何实现这个解决方案：

const message = document.getElementById("message");

// Focus main document to detect iframe clicks
window.focus();

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

注意：

此解决方案可能不与所有浏览器兼容，并且可能会出现计时和焦点处理问题。建议测试和自定义代码以适合您的特定应用程序。

以上是如何使用 JavaScript 检测跨域 iFrame 内的点击？的详细内容。更多信息请关注PHP中文网其他相关文章！