How Can I Reliably Detect Clicks Inside a Cross-Domain Iframe?

How to Detect User Clicks within an Iframe

Challenge:

Determining whether a user has clicked within an iframe can be challenging, especially when the iframe originates from a different domain (known as cross-domain iframes).

Solution:

To detect clicks within an iframe, a clever workaround can be employed using an invisible div positioned directly above the iframe's boundary. When the user clicks anywhere within the iframe, the div intercepts the click event and forwards it to the iframe.

Implementation:

In the main document, create the following elements:

<div>
<p>Then, insert the following JavaScript code:</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 });

Explanation:

1. window.focus() ensures that the main document has focus to enable the blur event listener.
2. window.addEventListener("blur", ...) captures the blur event, which occurs when the focus moves away from the main document.
3. Within the blur listener, a setTimeout is used to delay the event processing slightly to ensure that the browser has updated its internal state.
4. document.activeElement checks if the active element within the main document is an IFRAME, indicating that the click occurred within the iframe.
5. If confirmed, the textContent of the #message div is updated with the current timestamp, and the console.log message is displayed.

This technique provides a reliable way to track whether a user has clicked within an iframe, even when it is cross-domain.