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.. !!
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.
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.
This worked for me fine:
window.frames["your_iframe_id"].contentDocument.oncontextmenu = function(){
return false;
};
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>
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.
window.frames["your_iframe_id"].document.oncontextmenu = function(){ return false; };
Related
Please Any one can help me for solving this problem.I want to my web page show pdf file using Ifram, but i want just disable right click on ifram.
My Code is Bellow
$(document).contextmenu(function () {
return false;
});
<iframe id="pdf" src="<?= base_url('assets/uploads/' . $notice['file']); ?>#toolbar=0&scrollbar=0&navpanes=0&embedded=true&statusbar=0&view=Fit;readonly=true;disableprint=true;"
style="width:100%; height:900px;" frameborder="0"></iframe>
You can try this in javascript
<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
Function disableclick(e)
{
if(event.button==2)
{
alert(status);
return false;
}
}
</script>
But anyways any Javascript you code can be rendered mute by simply turning off Javascript on the browser.
Additionally, there's no way to disable the ability of any user to simply "view source" or "view page info" for your site and get what they want.
Hope the code helps you, and you reconsider disabling right click.
One more way in JS :
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
Also, your code looks like JQuery, so here's JQuery example :
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
I am working on website development i want to disable save image from my website, so i want to disable save image as and view image option please can any one help me.I want to disable specific option.
You can try displaying your images as a background to div elements with CSS like:
background-image: url('images/some_image.png');
instead of using img tags.
This way, the users would not get the usual save image option in context menu as one would expect.
try using contextmenu eventlistener:
<html>
<head>
<script type="text/javascript">
(function(){
var ImageId = document.getElementById("image");
if (ImageId.addEventListener) {
ImageId.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else {
ImageId.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
})()
</script>
</head>
<body>
<img id="image" src="" />
</body>
</html>
Make Custom ContextMenu
Check out this Tutorial on creating a custom context Menu :
http://luke.breuer.com/tutorial/javascript-context-menu-tutorial.htm
I'm sorry if this is basic, but I've searched and found nothing that works.
I want to load a web page. When that page loads, it displays an image. I want to have the page automatically start listening for a right arrow key press. When that happens, a function in my script will change the image (that part I have gotten to work by using a button that reacts when clicked).
It's the listening for and reacting to a key press I cannot get to work. Note that I'm using Safari, but I would like if possible for it to work in firefox or IE as well.
Please help thanks.
UPDATE TO RESPOND TO COMMENT: Here is what I tried, though I simplified the other part to make this shorter -- now it just writes a result to a div:
<html>
<head>
<script language="Javascript">
function reactKey(evt) {
if(evt.keyCode==40) {
document.getElementById('output').innerHTML='it worked';
}
}
</script>
</head>
<body onLoad="document.onkeypress = reactKey();">
<div id="output"></div>
</body>
</html>
If you are using jquery, you can do this:
$(document).keydown(function(e){
if (e.keyCode == 39) {
alert( "right arrow pressed" );
return false;
}
});
document.onkeydown= function(key){ reactKey(key); }
function reactKey(evt) {
if(evt.keyCode== 40) {
alert('worked');
}
}
http://jsfiddle.net/dY9bT/1/
Easiest thing to do is use one of the many many many hotkey libraries, like https://github.com/jeresig/jquery.hotkeys or https://github.com/marquete/kibo.
EDIT: try something like this (after you've already loaded Kibo's javascript).
In your body statement, add the onload handler: <body onload="setuphandler">.
Then add something like this (taken from the Kibo page):
<script type="text/javascript">
var k = new Kibo();
function setuphandler()
{
k.down(['up', 'down'], function() {
alert("Keypress");
console.log('up or down arrow key pressed');
});
}
</script>
Problem:
You have a regular set of URL links in a HTML page e.g.:
Foo Bar
You want to create a JavaScript function such that when any HTML links are clicked, instead of the client's browser navigating to that new URL "/foo/bar" a JavaScript function is executed instead (e.g. this may for example make an Ajaxian call and load the HTML data without the need to reload the page).
However if the JavaScript is disabled OR a spider crawls the site, the UTL links are maintained gracefully.
Is this possible? Does it already exist? What's the usual approach?
EDIT 1:
These are some great answers!
Just a follow on question:
If the user clicks on the back button OR forward button, this would naturally break (as in it would go back to the last physical page it was on as opposed to one that was loaded).
Is there any way (cross browser) to maintain the back/forward buttons?
(e.g create an array of links clicked and over ride the browser buttons and use the array to navigate)?
<script type="text/javascript">
function your_function() {
alert('clicked!');
}
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>
If Javascript is off, the link behaves normally.
In this case, unless your_function() does not return false, the link will be followed when clicked as well.
To prevent this, either make your_function() return false, or add return false; just after the function call in your onclick attribute:
<script type="text/javascript">
function your_function() {
alert('clicked!');
return false;
}
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>
Or:
<script type="text/javascript">
function your_function() {
alert('clicked!');
}
</script>
<a onclick="your_function(); return false;" href="/foo/bar">Foo Bar</a>
Using element.addEventListener()
With default anchor behaviour following click:
<script type="text/javascript">
document.addEventListener("load", function() {
document.getElementById("your_link").addEventListener("click", function() {
alert('clicked');
}, true);
}, true);
</script>
<a id="your_link" href="/foo/bar">Foo Bar</a>
Without:
<script type="text/javascript">
document.addEventListener("load", function() {
document.getElementById("your_link").addEventListener("click", function(event) {
event.preventDefault();
alert('clicked');
}, true);
}, false);
</script>
<a id="your_link" href="/foo/bar">Foo Bar</a>
Given current HTML and W3C APIs, I would go for:
<script src="linkify.js"> </script>
in the markup, with linkify.js containing something like:
window.onload= function() {
document.addEventListener('click', function(ev) {
ev.preventDefault();
var el = ev.target;
if (el.tagName === 'A') {
// do stuff with el.href
}
}, false);
};
See e.g. http://jsfiddle.net/alnitak/nrC7G/, or http://jsfiddle.net/alnitak/6necb/ for a version which doesn't use window.onload.
Note that this code uses a single listener function registered on the document object, which will act on every <A> tag on the page that doesn't trap clicks for itself.
Use an onclick attribute:
click?
The return false prevents the default behaviour, in the absence of JavaScript, however, the link will be followed.
function do_whatever (e)
{
e.preventDefault ();
// do whatever you want with e.target
}
var links = document.getElementsByTagName ("a");
for (var i=0; i<links.length; ++i)
links[i].addEventListener ('click', do_whatever);
http://jsfiddle.net/bTuN7/
All done inside script and it won't 'hurt' if JavaScript doesn't work.
If you think about AJAX, then you have to know, that googlebot tries to parse it. http://www.youtube.com/watch?v=9qGGBYd51Ts
You can code like:
$('a').click(function() {
doSomethingWithURL($(this).attr('href'));
return false;
});
JavaScript is not executed in case it's disabled or if it's some web crawler, so from my point of view this is preferable.
There's quite a few methods out there such as this:
http://www.malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/
Remember, though, that by virtue of a well setup server and caching you're not going to gain yourself much performance with an Ajax Load.
This might be hard to describe without copying and pasting a ton of code here, but I'll try.
I had to build a custom draggable object using javascript- I've used jquery in the past but it didn't work for this project. I've got it mostly working, except for when a user clicks on the object (a DIV) and drags it across the page, his or her cursor changes into the classic i-beam text selector.
No matter what I try, I can't disable this cursor. I've tried putting something like.
this.style.cursor = 'pointer';
in the 'onmousedown' function of the div in question, but as soon as you start to drag, blammo, you have an i-beam cursor. The same is true if I put the above code in the actual dragging function.
I've tried disabling text selection in the whole document using css(not an actually solution, as I want people to be able to copy/paste on this site, but just to see if it works) and still, the cursor changes while the user drags.
I guess what I'm really looking for is a way to temporarily disable that i-beam cursor from appearing on my page at all.
Well, thanks in advance for any help.
The correct way to do this (works on Chrome, at least):
var canvas = $('canvas')[0]
canvas.onselectstart = function () { return false; }
See html5 canvas hand cursor problems.
$('#canvas').mousedown(function(){
$(this).css('cursor','move');
return false;
});
canvas.onselectstart does not exit.
This depends what content is under the cursor at the time of dragging.
One thing that might work for you is to set all children to cursor: pointer.
.dragging * { cursor: pointer !important }
This worked OK but not great for me. It may or may not work better with your draggable control. Perhaps you can try setting the cursor style the same in all mouse events?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mouseDown = false;
$(document).ready(function() {
$('#dragArea').mousemove(function(e) {
if (mouseDown) {
this.style.cursor = 'pointer';
} else {
this.style.cursor = 'default';
}
});
$('#dragArea').mousedown(function() { mouseDown = true; this.style.cursor = 'pointer'; });
$('#dragArea').mouseup(function() { mouseDown = false; this.style.cursor = 'default'; });
$('#pageBody').mousemove(function() { this.style.cursor = 'default'; });
});
</script>
</head>
<body id="pageBody">
<div id="dragArea" style="height:200px;width:200px;border:solid 1px red;">
</div>
</body>
</html>