使用 JavaScript 检测对 Iframe 的点击

javascript dom-events iframe ads click-tracking

2022-08-30 02:28:49

我知道，如果用户是跨域的，则无法判断用户在内部正在做什么。我想做的是跟踪用户是否在.我想象一个场景，其中顶部有一个不可见的，并且将随后将单击事件传递给.iframeiframediviframediviframe

这样的事情可能吗？如果是这样，那么我该怎么做呢？这些是广告，所以我无法控制使用的标签。iframes

答案 1

这当然是可能的。这适用于Chrome，Firefox和IE 11（可能还有其他）。

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

// main document must be focused in order for window blur to fire when the iframe is interacted with. 
// There's still an issue that if user interacts outside of the page and then click iframe first without clicking page, the following logic won't run. But since the OP is only concerned about first click this shouldn't be a problem.
window.focus()

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

<div id="message"></div>
<iframe width="50%" height="300" src="//example.com"></iframe>

注意：这仅检测第一次点击。据我所知，这就是你想要的。

答案 2

这是一个小的解决方案，适用于所有浏览器，甚至IE8：

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);

您可以在此处进行测试：http://jsfiddle.net/oqjgzsm0/