WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to detect click inside iframe using JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery contents() method

If you try to detect or capture a click event inside an iframe simply using jQuery click() method it will not work, because iframe embed a web page within another web page. However, you can still do it on the same domain utilizing the jQuery contents() and load() method.

The following example will display an alert message whenever you click inside the iframe.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Detect Click into iFrame</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <style type="text/css">
  •     body{
  •         padding: 30px;
  •     }
  •     iframe{
  •         width: 100%;
  •         height: 200px;
  •         border: 2px solid #ccc;
  •     }
  • </style>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("iframe").load(function(){
  •         $(this).contents().on("mousedown, mouseup, click", function(){
  •             alert("Click detected inside iframe.");
  •         });
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <iframe src="/examples/html/table-layout.php"></iframe>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.