How Can I Detect Clicks Inside Cross-Domain Iframes Using JavaScript?

Detecting Clicks Within iframes Using JavaScript

If you're looking for a way to determine whether a user has clicked within an iframe, you might have stumbled upon the limitation that cross-domain iframes cannot be monitored directly in JavaScript. Nonetheless, there's a clever technique that can help you achieve your goal.

The solution lies in overlaying an invisible div over the iframe. When a click occurs within the iframe, it will also trigger the click event for the overlaying div. By listening for this event, you can indirectly detect a click within the iframe.

Here's a code example to illustrate this approach:

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

// Ensure the main document has focus to register the blur event.
window.focus();

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

<div>

In this example, the message div is used to display "clicked" along with the timestamp when a click occurs within the iframe. Note that this approach works effectively in Chrome, Firefox, and IE 11 (and likely other browsers as well). It provides a straightforward solution to monitor user interaction within cross-domain iframes, especially when you have no control over the iframe tags used.

The above is the detailed content of How Can I Detect Clicks Inside Cross-Domain Iframes Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!