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
Related
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; };
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'm changing the background of some Links using JavaScript:
$(document).ready(function(){
$("#home").click( function(){
$("body").removeClass("bg2 bg3").addClass("bg1");
});
$("#link1").click( function(){
$("body").removeClass("bg1 bg3").addClass("bg2");
});
$("#link2").click( function(){
$("body").removeClass("bg1 bg2").addClass("bg3");
});
});
Bg1,2,3 are css classes of background (bg images). I prevent refresh button (to save BG) with hash:
var x = location.hash;
if (x==="#link1")
{
$ ("body").removeClass("bg1 bg3").addClass("bg2");
}
else if (x==="#link2")
{
$ ("body").removeClass("bg1 bg2").addClass("bg3");
}
});
It work but if i click on back button it doesn't change the background to previous link background. Is it possible to fix it except web storage/session storage? With hash or somethink like this?
When you hit the back button of your browser, the page will not reload because you are using the hash, this means to the browser that you want to move to a different anchor.
To proper manipulate the history stack you need to use the freaking awesome History API
To fix your problem you need to intercept the event triggered when your history stack change.
<html>
<head>
<script type="text/javascript" src="../lib/jquery.1.9.2.js"></script>
</head>
<body onload="checkHash();">
testing hash stuff
click to change
<script type="text/javascript">
console.log('loaded');
var checkHash = function(){
if(location.hash==="#black"){
$('body').css("background-color","black");
}else if(location.hash==="#white"){
$('body').css("background-color","white");
}
}
//the event below will be trigger when you hit backbutton or the link
window.addEventListener("popstate", function(e) {
console.log('trigger when hit the back button')
checkHash();
});
</script>
</body>
</html>
IE9 FIX
If you need to implement the same behavior on IE9 you must listen the onhashchange, so you can trigger the code to change the background when backbutton was clicked.
<body onhashchange="alert('trigger the background change function')">
I'm currently using CKEditor and I'm having some trouble removing my toolbar when I click away. Currently I want to create CKEditor instances dynamically as users click on it.
However the trouble comes up when I try to click away without clicking on the toolbar. When I try to click away on the toolbar stays there and it does not run any of my onBlur code. It's only when I click on a button the toolbar or click away and then click back to the text area will it remove the toolbar and run my onBlur code.
Right here is a small snippet of code that I wrote to create the instance when clicked. Am I doing something wrong here or am I missing a piece of focus code?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="ckeditor\ckeditor.js"></script>
<script>
$(document).ready(function(){
CKEDITOR.disableAutoInline = true;
$("#abc").on('click', function(){
var ck = CKEDITOR.inline(CKEDITOR.document.getById('abc'));
});
});
</script>
</head>
<body>
<div id="abc" contenteditable="true" >
Edit this
</div>
</body>
</html>
Try removing the jquery on click and simply allow ckeditor to handle it
$(document).ready(function () {
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('abc');
});
OR
var abcEditor = CKEDITOR.inline('abc');
So instead of making it on click I did it so that on page load it will find all content editable areas and create ckeditor instances.
Originally I wanted to use on click to create an instance dynamically as I will be populating things dynamically. However, I found it easier to just create a ckeditor instance as I create the dynamic content.
Using this function I am able to create new ckeditor instance as the dynamic content is created and also use the onblur function to write everything to my database.
If any one has any solutions to getting the raw html from ckediter, please let me know. This method has to get the parent and then find the element and then save it, which to me doesnt sound right. So if you have any suggestions on how to do this I'm all open ears! thanks!
if(CKEDITOR.instances[this.id] == undefined){
console.log("creating new instance");
var ck = CKEDITOR.inline(CKEDITOR.document.getById( this.id ));
ck.on('blur', function(e){
var id = e.editor.name;
var html = $("#"+id).parent()[0].outerHTML;
console.log(html);
$.ajax({
type: 'POST',
url: "saveHtml",
data: { content : html}
}).done(function(data) {
console.log(data);
console.log("finished sending data");
});
});
}else{
console.log("no instance created");
}
How do I separate with all the icons still in the div element?
Basically, inside div, I have 4 things to click. The last was made to link for the whole div element click. The middle elements were for specific icon clicks. But now, for specific icon clicks, I want the clicks to connect to their own links. For example, if one clicks github png , it should go to github link, but now the google div link overwrites it. For whatever I click, I only connect to one link, which I do not intend.
Thanks
<script type="text/javascript">
$(document).ready(function(){
$(".Apps").click(function(){
window.open($(this).find("a").last().attr("href"));
return false;
});
});
</script>
<div class="Apps">
<p><b>Web Dev Project 3</b><br><i>(coming soon)</i></p>
<a href="https://github.com/" target="blank">
<img src="https://github.com/apple-touch-icon-114.png" width="30" height="30"/></a>
<a href="http://google.com" target="blank">
<img id="logo" src="http://cclub.slc.engr.wisc.edu/images/Under-Construction.gif" width="30" height="30"/></a>
</div>
There's really no such concept as an <a> being "connected with" a containing element. Instead of that, why not just catch "click" events on the <div> and filter out ones that aren't on the icons:
$('div.Apps').on("click", ":not(a img)", function() {
window.location = "http://google.com";
});
The way your markup is done, it's hard to tell how there'll be screen area that's not icons inside the container, but presumably you've got padding/margins or something.
Exclude the anchors:
$(".Apps").click(function(e){
if (! $(e.target).closest('a').length ) {
window.open($(this).find("a").last().attr("href"));
return false;
}
});
If I were you I would assign different ids for the div and the a link, then inside the a specific link instructions just prevent the default behaviour of the click;
$(´#aLinkId´).on(´click´, function(){
event.preventDefault();
event.stopPropagation();
window.open(whatever here);
});
$(´#aDivId´).on(´click´, function(){
window.open(other whatever here);
});
I this what you are looking for?
http://jsfiddle.net/gespinha/WPsbb/2/
$(document).ready(function () {
$(".Apps").click(function () {
window.open($(this).find("a").last().attr("href"));
return false;
});
$(".Apps > a").click(function () {
window.open($(this).attr("href"));
return false;
});
});