How to disable right click on IFRAME

javascript jquery html iframe model-view-controller

38,638

Solution 1

In order to disable the right click menu you could use the following snippet:

document.oncontextmenu = function() { 
    return false; 
};

I made a JSFiddle that displays the effect.

Solution 2

Your question is a little confusing as the title is about right clicking, yet the bddy of the question is about copying and pasting and about using the print screen button. Whilst you can do some things with the right click button (already answered by other posts and well documented) generally your question is how to prevent people accessing the code/content or taking a print out of your content.

This isn't possible. Whilst you can make it more tricky for some users, it will never succeed against those who are determined enough.

First of, even if you (somehow) disabled the print screen button on the keyboard, there are many screen capture programs out there... And I can't see how it will (ever) be possible to detect another program doing this from within the limitations of website code.

Any javascript solution can fail, they can turn off javascript.

Even if you managed to prevent some one from viewing the source code and copying the HTML, some one could just scrape the content direct from the site.

I have a friend who is a graphic designer and he wanted to do this (disable people copying images in this case). I told him not to bother, if they want to take the content you put into the public domain, they will. A water mark may help but only in some situations. Personally, I'd give up on this task and just accept it, and focus on more interesting tasks.

Solution 3

This worked for me fine:

window.frames["your_iframe_id"].contentDocument.oncontextmenu = function(){
 return false; 
};

Solution 4

We can't just disable right click on the iframe. Because of the iframe content is loading from another source so our code will not work on it. Here I found a solution which is the only option we have.

<html>
<head>
<title>Disable Context Menu</title>
<script type="text/jscript">
  function disableContextMenu()
  {
    window.frames["fraDisabled"].document.oncontextmenu = function(){alert("No way!"); return false;};   
    // Or use this
    // document.getElementById("fraDisabled").contentWindow.document.oncontextmenu = function(){alert("No way!"); return false;};;    
  }  
</script>
</head>
<body bgcolor="#FFFFFF" onload="disableContextMenu();" oncontextmenu="return false">
<iframe id="fraDisabled" width="528" height="473" src="local_file.html"></iframe>
<div style="width:528px;height:473px;background-color:transparent;position:absolute;top:0px;">
</body>
</html>

Solution 5

1.) Disabling a right-click in iFrame using jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
// Function to block the right click in the iFrame
<script type="text/jscript">
function injectJS(){    
    var frame =  $('iframe');
    var contents =  frame.contents();
    var body = contents.find('body').attr("oncontextmenu", "return false");
    var body = contents.find('body').append('<div>New Div</div>');    
}
</script>

Call the "injectJS()" function in the iFrame

<iframe id="myiframe" width="528" height="473"  onload="injectJS()"></iframe>

2.) Disable the right-click in the webpage

With javascript alone

document.addEventListener('contextmenu', event => event.preventDefault());

Here's an example in jQuery (Note: pressing the right mouse button will fire three events: the mousedown event, the contextmenu event, and the mouseup event)

// With jQuery
$(document).on({
"contextmenu": function(e) {
    console.log("ctx menu button:", e.which); 
    // Stop the context menu
    e.preventDefault();
},
"mousedown": function(e) { 
    console.log("normal mouse down:", e.which); 
},
"mouseup": function(e) { 
    console.log("normal mouse up:", e.which); 
} 
});

If you have any questions leave a comment below.

View more solutions

38,638

Author by

Lax

Updated on May 05, 2021

Comments

Lax about 3 years

I have a document content displayed on IFrame in MVC web application. The content should not be copied and printed . I tried to disable right click using two functions style="pointer-events:none;" oncontextmenu="return false" for Iframe, which is working fine. But on right click, the pop up with 'View Frame Source', 'View Source' are displaying. How can I restrict this.! Also, how to restrict the print screen option. I know there are other utilities from where anybody can capture data. But the client wants to restrict the print screen option.

<script lang=JavaScript>
    function clickIE() {
        if (document.all) {
            return false;
        }
    }
    function clickNS(e) {
        if (document.layers || (document.getElementById && !document.all)) {
            if (e.which == 2 || e.which == 3) {
                return false;
            }
        }
    }
    if (document.layers) {
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown = clickNS;`enter code here`
    }
    else {
        document.onmouseup = clickNS;
        document.oncontextmenu = clickIE;
    }
    document.oncontextmenu = new Function("return false")

<body   oncontextmenu="return false" onkeydown="if ((arguments[0] || window.event).ctrlKey) return false" >
<div  id="div1" style="background-color:Red; height:120px">


  <iframe id="id1" src="" name="I1" scrolling="no" height="100%" width="100%" marginwidth ="0" marginheight="0" onload="disableContextMenu();" style="pointer-events:none;"  /> 



</div>

Please Any help appreciated.. !!