I have a button in our app that, when you click it, brings up a pop-up window asking if you are sure you want to proceed. Normally, that code would be in our HTML, but for this particular popup, it must be in Javascript. Anyway, the pop-up works just fine in Firefox, Chrome, and IE9, but it does NOT work in IE8. It is extremely frustrating. Does anyone have any ideas on how to fix this? Here is my code:
function graphicalAppConfirm() {
var graphical = $('#application_graphical').is(':checked');
if (graphical == true) {
$('.default_action').attr('onclick', "return confirm('This setting cannot be undone. Are you sure you wish to continue?')");
}
else {
$('.default_action').removeAttr('onclick');
}
}
I tried using the onmousedown event instead, and that made the popup appear, but then it would not go away.
Try using bind and unbind click. You don't necessarily care about the attributes.
function graphicalAppConfirm() {
var graphical = $('#application_graphical').is(':checked');
if (graphical == true) {
$('.default_action').click(function() { return confirm('This setting cannot be undone. Are you sure you wish to continue?'); });
} else {
$('.default_action').unbind('click');
}
}
If you're using jQuery 1.7+ then on/off is recommended instead of bind/unbind. See the documentation http://api.jquery.com/off/
Update: Here is an example with jQuery 1.8 which you can modify for your own usage. You'll probably want to perform the on/off functions when the checkbox is changed so that is how this example works.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<label for="check"><input id="check" type="checkbox" />Enable Button</label>
<div id="output" style="display:none;">Click registered.</div>
<script>
function callback() {
$("#output").show().fadeOut("slow");
}
$("#check").change(function() {
if (this.checked) {
$("body").on("click", "#theone", callback)
.find("#theone").text("Click Me Enabled!");
} else {
$("body").off("click", "#theone", callback)
.find("#theone").text("Click Me Disabled");
}
});
</script>
</body>
</html>
You can figure out the rest from there. You can test and see it work in IE 8 http://jsbin.com/ojejar/6
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 have a page where I generate textareas via AJAX and fire events if those textareas are changed. This works great on IE9+ and other browsers such as Firefox, Chrome, Safari, etc. The problem is IE8 and under. They don't fire the change event. The code is:
Textarea looks like:
<textarea name="answer8158" id="answer8158"></textarea>
Javascript looks like:
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
//Do Something
}
});
Is there a workaround to make the change event work? I would be fine with PrototypeJS or pure javascript solution.
Thanks.
The solution is to go back to hard coding the onchange events in the AJAX. Unfortunately the document observe (blur/change) doesn't work for IE8 and under. Not how I like to write code, but is the only solution I have found.
You should explain more about how you are using the AJAX response, the following works fine in IE 6 with Prototype.js v 1.7.1. I've used DOM and innerHTML to emulate what you might be doing with the AJAX response:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
alert(el.value);
}
});
function addTextarea(el){
var ta = document.createElement('textarea');
ta.name = 'ta2';
el.parentNode.insertBefore(ta, el.nextSibling);
}
function addTextarea2(){
document.getElementById('s0').innerHTML = '<textarea></textarea>';
}
</script>
<textarea name="answer8158" id="answer8158"></textarea><br>
<button onclick="addTextarea(this);">Add using DOM</button><br>
<button onclick="addTextarea2();">Add using innerHTML</button><span id="s0"></span>
If you are programmatically changing the value and expecting a change event to fire, that is entirely different. BTW, I would write the observer as:
document.observe('change', function(e) {
var el = e.findElement('textarea');
if (el) {
alert(el.value);
}
});
which is only a few extra characters and a lot clearer.
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>
I am trying to make a click event with Javascript on this image button
<input type="image" alt="Skip" name="bt_cancel" id="bt_cancel"
src="http://images.eversave.com/Images/optin/skip_button_092106.gif"
onclick="return handleSubmit(this);">
I am trying to use it in Chrome but it doesn't respond when I load the page.
I am using the following code:
if((window.location.hostname == "eversave.com")){
window.onload = function() {
document.getElementById("bt_cancel").click();
}
}
your code works absolutely fine, I think the problem is in the host name check. alert it to find out what it really is, like this: http://jsfiddle.net/AvgME/
<input type="image" alt="Skip" name="bt_cancel" id="bt_cancel"
src="http://images.eversave.com/Images/optin/skip_button_092106.gif"
onclick="return handleSubmit(this);">
<script>
if((window.location.hostname != "eversave.com")){
window.onload = function() {
document.getElementById("bt_cancel").click();
}
}
function handleSubmit(f) {
alert(window.location.hostname);
}
</script>
I think using jQuery is in your case a good option.
The code would than look like:
$(document).ready(function(){
$('#bt_cancel').click(function(){
// do some stuff with it like:
alert($(this).attr('src'));
});
});
You could just call the function:
handleSubmit(document.getElementById("bt_cancel"));
Btw. returning the value in the image click handler has no effect. There is no default action associated with clicking on images.
If the element is in the DOM on page-load, you can use this in the head of the document, otherwise put it after the </body> tag:
<script type="text/javascript">
var image = document.getElementByID('bt_cancel');
image.onclick = function(){
handlesubmit(this);
};
</script>
Though in all fairness, I think I prefer #Felix Kling's answer.