How To Prevent Context Menu In An Iframe?

I am trying to prevent browsers's context menu from showing on the event 'Right click' on every element 'iframe' but it isn't working -- the context menu is still working here is m

Solution 1:

Each window, tab and iframe in a browser are different security contexts and each is sandboxed from the other. This is to prevent one page from being able to tamper with another.

So styles, script and script access on an iframe are limited to the iframe element itself, not any of its contents. Similarly, an iframe cannot access it's parent for the same security reasons.

The only way to prevent the context menu inside an iframe is to load your context menu prevention script inside the iframe itself. If you don't have access to the iframe's contents, then it is not possible. If it were, you would be potentially interfering with how a 3rd party website operates inside that iframe.

Solution 2:

I've created a JSFiddle to attempt to do what you're looking for, but it seems that what you're trying to do is not possible on an iframe tag. The browser is going to enforce specific rules for iframes & even override the web developer's CSS & JS programming code.

The jQuery example for the .contextmenu() method does work with a div tag.

In my JSFiddle demo, it appears that the right-click menu is only blocked on the lime green div tag, but not on the iframe tags.

(Even trying to wrap the iframe inside of the div tag & giving the div tag a solid background color, will cause the browser to force the z-index of the iframe to pop above the z-index of the div tag. Thus popping above the colored div & overriding what the developer tells the browser to do. It's to prevent people from hiding iframes underneath other content & loading ads or scripts, without the user being able to see or access that hidden content.)

You may have to try loading something like this, from inside of the iframe's src file:

<script>
    $(function() {
        $("body").contextmenu(function(e) {
            e.preventDefault();
        });
    });
</script>

It could work on body tag, but I haven't verified that it will work. If it does work, then it would only work for your web pages, which are loaded into the iframe tag & not someone else's web pages.

Sorry, but you may not be able to do what you want to do in this scenario. Feel free to play around with my JSFiddle. Maybe you can figure out a work-around, that will be acceptable to you. :)

Solution 3:

If you are using jquery. Insert this code inside your iframe page just before the end of body tag:

<script>
    $("html").contextmenu(function(e) {
       e.preventDefault();
    });
</script>

this will totally disable your iframe context menu. Tested on chrome browser.