How to Disable Clicks in IFrame Using JavaScript

IFrames are useful for embedding other website’s contents on your website and vice versa. But sometimes you may need to disable clicks in iframe using JavaScript. In this article, we will learn how to disable clicks in iframe using JavaScript.

How to Disable Clicks in IFrame Using JavaScript

There are several ways to disable clicks in iframe using JavaScript.

1. Using CSS

One of the simple ways to do this is to just disable pointer events inside iframe, using CSS. Here is a sample CSS configuration for this purpose. We use pointer-events property for this purpose, and set it to none value.

div {
  width: 50vw;
  height: 50vh;
  overflow: scroll;
}

iframe {
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

Here is a div that contains iframe where the above CSS rules are applied.

<div>
  <iframe src="http://example.com"></iframe>
</div>

2. Using JQuery

You can also disable clicks using JQuery. Here is an example where we detect clicks using JQuery and return false, meaning, do nothing.

<!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') 
        {
          return false;
          clearInterval(detector);
        }

      }, 100);

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

In this article, we have learnt how to disable clicks in IFrame. You can use either of these methods depending on your requirement.

Also read:

How to Prevent Web Page from Being Loaded in IFrame
How to Replace Values in Pandas DataFrame
How to Add New Column to Existing DataFrame
How to Change Element Class Property Using JavaScript
How to Get Value of Data Attribute in JavaScript

How to Insert Element After Another Element in JavaScript

How to Listen to Variable Changes in JavaScript

How to Merge Two Arrays in JavaScript

How to Count Substring Occurrence in String in JS

How to Check if Element is Visible or Hidden Using jQuery

How to Get Random Element from Array in JavaScript

How to Automatically Scroll to Bottom of Page in JS

How to Bind Event to Dynamic Element in jQuery