Detect Click into Iframe using JavaScript

by

This is certainly possible. This works in Chrome, Firefox, and IE 11 (and probably others).

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="https://example.com"></iframe>

Caveat: This only detects the first click. As I understand, that is all you want.

More Related Contents:

  1. Detect mousemove when over an iframe?
  2. Wait for iframe to load in JavaScript
  3. How to detect a click inside of an iframe (cross-domain)? Aka prevent click fraud
  4. iFrame onload JavaScript event
  5. Google DFP – Resize SafeFrame custom creative outer Iframe container from inside (expand ad)
  6. Reload an HTML page just once using JavaScript
  7. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  8. Getting the ID of the element that fired an event
  9. How to get the body’s content of an iframe in Javascript?
  10. Get current URL from IFRAME
  11. Object.watch() for all browsers?
  12. window.onbeforeunload and window.onunload is not working in Firefox, Safari, Opera?
  13. Event when window.location.href changes
  14. Keydown Simulation in Chrome fires normally but not the correct key
  15. Why is the DOMSubtreeModified event deprecated in DOM level 3?
  16. How to refresh an IFrame using Javascript?
  17. Access elements of parent window from iframe
  18. Browser event when downloaded file is saved to disk
  19. Get IFrame’s document, from JavaScript in main document
  20. Write elements into a child iframe using Javascript or jQuery
  21. Is there a way to get SSL certificate details using JavaScript?
  22. Intercept all ajax calls?
  23. How to auto-size an iFrame? [duplicate]
  24. How do I clear this setInterval inside a function?
  25. html onchange event not working
  26. How to detect CSS3 resize events
  27. JavaScript/jQuery event listener on image load IE issues
  28. onDeviceReady not firing in PhoneGap hello world app
  29. Prevent click event from firing when dblclick event fires
  30. Are dynamically inserted tags meant to work?

Leave a Comment