How to detect a click on iframe in JQuery

February 3, 2021 admin

In this tutorial, we are going to see how to detect a click in iframe by simply using the click() method of jQuery, using only the click() method, it will not work, because iframe will embed a web page into another web page. However, you can still do this using the content() and load() method of jQuery.

The following example displays a message each time you click in the iframe.

How to detect a click on iframe in JQuery

<!DOCTYPE html>
<html>
  <head>
    <title>Detect a click on iframe</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

      var detector = setInterval(function() {

        var elem = document.activeElement;

        if (elem && elem.tagName == 'IFRAME') 
        {
          alert("Click detected inside iframe.");
          clearInterval(detector);
        }

      }, 100);

    </script>
  </head>
  <body>
    <iframe id="iframe" src="//example.com" height="200" width="500"></iframe>
  </body>
</html>