Some websites have the annoying quality of auto-refreshing using some JS magic. This seems to bypass the browser's "do not auto refresh" options.
My question - is there a simple way of telling the browser (also via JS, in an add-on) "do not listen to them! Never auto-refresh!"?
EDIT: Just to make myself clear - I want to write a browser extension that prevents the current page from giving a "refresh" signal - whether auto-refresh or "standard" refresh given automatically by the page using some timer. I think that's a standard JS question...
Edit: Sorry, I missunderstood the question!
I think that what you need is this:
window.onkeypress = window.onkeyup = window.onkeydown = function( event ) {
event.preventDefault();
// or, in this case:
//return false;
};
When the window will receive the events of keypress, keyup e keydown signals that the default behavior MUST be prevented. If you return false, you will stop the event chain, preventing to execute anything too. The two lines have the same effect, give a try commenting each line.
Here is a improoved example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing...</title>
</head>
<body>
<div id="clickDiv">Click me ;)</div>
<br/>
<input id="typeInput" value="Type something ! (here)"/>
</body>
<script type="text/javascript">
window.onkeypress = window.onkeyup = window.onkeydown = function( event ) {
event.preventDefault();
return false;
};
document.getElementById( "clickDiv" ).onclick = function( event ) {
console.log( "you clicked me and the window events related to the keyboard are still being prevented ;)" );
};
document.getElementById( "typeInput" ).onkeyup = function( event ) {
console.log( "you typed inside me and the window events related to the keyboard are still being prevented ;)" );
};
</script>
</html>
All popular browsers except Chrome and Safari already have options related to disabling auto-refreshing. To disable auto-refreshing in these browsers, check out this article: http://maketecheasier.com/disable-web-page-auto-refresh-for-various-browsers/2010/12/12
For a Chrome extension to stopping auto-refresh, check this out: https://chrome.google.com/webstore/detail/lcldcllmbokpbniijpnkpgoboadbfphb
Each browser can have this functionality turned off but I don't think there is a way to affect these changes through JS unless you write an "Extension".
Related
This webpage has a simple event listener, when I right click it blocks opening the context menu. simple enough.
But when I refresh the page or on initial load of the page, if I start with right mouse clicking the page, it shows the context menu, then blocks it ever time I right mouse click after that. I tried it in Chrome, FireFox and IE. Same results.
I experience the same thing with mouse down, keydown, or touch events, etc. It is like the first click is ignored. I am looking for JavaScript solution (not jquery). What am I missing?
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function () {
window.addEventListener("contextmenu", mouseright);
}
function mouseright() {
document.oncontextmenu = function(e) {
var e = e || window.event;
alert("right");
e.preventDefault();
}
}
</script>
</head>
<body>
hello world
</body>
</html>
I even tried adding this before the event listener (as in this post keydown not detected until window is clicked), had no luck with document.onload and did see that it could be a possible browser focus on page load setting. Any thoughts or other ideas I didn't try in JavaScript?
if (document.hasFocus() == true) {
} else {
window.focus();
}
You're unnecessarily assigning the event twice (as both window.contextmenu and document.oncontextmenu). Removing the extra wrapper seems to work:
window.onload = function () {
window.addEventListener("contextmenu", mouseright);
}
function mouseright(e) {
var e = e || window.event;
alert("right");
e.preventDefault();
}
(The window.onload may also be unneeded, depending on where you place the addEventListener in the document.)
I would like to access the event that caused a beforeunload event. Specifically, if I click on a link to another page, I would like to know what the link was in the beforeunload event handler.
In this way, I would be perform different actions in the beforeunload event handler according to what the URL was.
Eg 'http:' or 'https:' warn user about losing unsaved changes; 'mailto:' or 'skype:' don't warn user because page is not actually going to be unloaded.
I am trying to build a good solution to a problem like this:
mailto link (in chrome) is triggering window.onbeforeunload - can i prevent this?
I was all prepared to tell you this was impossible because the onbeforeunload event only reports to have been triggered by the window when you check out event.target, event.originaltarget, etc. If you override window.onclick, however, we can modify that method to register which element was last clicked on the page. Then, by providing code for window.onbeforeunload, we can specify new behavior that will check for the href of the element which was clicked last. Hooray, beer!
Here's code that will give you exactly the information you want though, in pure javascript and with no cruft to add inside your anchor tags. I've also thrown in the preventDefault() which will pop up the "This page is asking you to confirm that you want to leave - data you have entered may not be saved." confirm box. Hope this helps - you can figure out what to do from here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>12065389</title>
<meta charset="utf-8">
<script type="text/javascript">
var last_clicked;
window.onclick = function(e) {
last_clicked = e.target;
return true;
}
window.onbeforeunload = function(e) {
var e = e || window.event;
if (last_clicked.href) {
alert(last_clicked.href);
e.preventDefault();
}
}
</script>
</head>
<body>
google
</body>
</html>
I would probably attach the event to all links on the page, rather than the beforeunload event.
Something like:
$("a").click(function(evt) {
if($(this).attr('href').indexOf('http') == 0) {
if(confirm("Are you sure?")) {
//continue
} else {
evt.preventDefault();
}
}
}
I've tried $('#field').focus(), and any other method found on the internet. Nothing worked. I have a simple html that reproduces the problem.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#field').focus();
});
</script>
</head>
<body>
<input type="text" id="field" name="field"/>
</body>
</html>
Please help!
Actually, the general javascript function "focus" is deactivated in the android browser. Hence, the jQuery focus function is deactivated since it's using the above.
if you bind it to another click event it will work. This works for me:
$(document).ready(function()
{
$('#field').click(function(e){ $(this).focus(); });
$('body').click(function(e)
{
$('#field').trigger('click');
})
})
Will pop up the software keyboard. trigger() will trigger any event you give it. In this case the default behaviour of clicking on the field == tap == focus == win! Note: this call is bound to another click event happening.
click() or focus() alone is not enough. You need to focus() then click(). Beware of endless loops if your script is triggered by an onclick() on a containing element. The script below is working for me on Chrome for android 58 and Safari mobile 602.1. Soft keyboard popping nicely.
var target = document.getElementsByTagName("input")[0];
if (event.target != target) {
target.focus();
target.click();
}
Is there a way to capture to result of the window.onbeforeunload confirmation dialog like the one below from Stack Overflow (this happens when leaving the 'Ask Question' page without posting the question)?
This is how it appears in Chrome, I believe it's slightly different in other browsers, but you always have some form of yes/no buttons.
Presumably if they're still on the offending page after the event has been triggered they chose to stay and you could probably figure this out by watching the sequence of js. However I would like to know how to determine if they clicked "Leave this page"?
I've implemented this like below:
// concept taken from SO implementation
function setConfirmUnload(showMessage, message) {
window.onbeforeunload = showMessage ? (message ? message : "this is a default message") : null;
}
// pseudo code
listen to changes on inputs
if any inputs fire a change event
call setConfirmUnload(true, 'My warning message')
note I'm using jQuery within my site.
I'm essentially trying to implement a Gmail like drafting implementation, wherein if a user leaves a page with a form they've made changes to without saving they're warmed with a similar dialog. If they choose to discard they're changes and leave the page, I need to clean up some temporary records from the database (I'm thinking an AJAX call, or simply submitting the form with a delete flag) then sending them on their way.
My question also relates to:
jQuery AJAX call in onunload handler firing AFTER getting the page on a manual refresh. How do I guarantee onunload happens first?
You can have the exit confirmation using window.onbeforeunload but there isn't a way to find out which button the user clicked on.
To quote an earlier response from jvenema from this thread:
The primary purpose for the
beforeunload is for things like
allowing the users the option to save
changes before their changes are lost.
Besides, if your users are leaving,
it's already too late [...]
How about this:
$( window ).bind( 'beforeunload' , function( event ) {
setTimeout( function() {
alert( 'Hi againe!' );
} );
return '';
} ).bind( 'unload', function( event ) {
alert( 'Goodby!' );
} );
Late to the party, but I found the following code (in TypeScript) to be a decent way to detect if the person clicked on 'Ok' on that confirmation dialogue window.
public listenToUnloadEvents(): void {
window.addEventListener('beforeunload', (e) => {
const confirmationMessage = '\o/';
(e || window.event).returnValue = confirmationMessage; // Gecko + IE
return confirmationMessage; // Webkit, Safari, Chrome etc.
});
window.addEventListener('unload', () => {
this.sendNotification(Action.LEFT)
});
}
I'm not sure how much time you have to run code in the unload event, but in this instance, I am sending a notification through Socket.io, so it's very quick at completing.
As for detecting the cancel on that notification, as someone else mentioned, creating a global variable like let didEnterBeforeUnload = false could be set to true when the beforeunload event fires. After this, by creating the third event, like so (again, in TypeScript), you can infer the user pressing cancel
window.addEventListener('focus', (e) => {
if (didEnterBeforeUnload) {
console.log('pressed cancel')
}
didEnterBeforeUnload = false
});
As a side-note though, these events won't (iirc) fire unless you have interacted with the page. So make sure to click or tap into the page before trying to navigate away during your testing.
I hope this helps anyone else out there!
How do I determine if onbeforeunload was caused by clicking the close button or a page refresh or generally what event caused onbeforeunload?
here is a snippet:
window.onbeforeunload = function( e ){
if( !e ) e = window.event;
// insert code to determine which is the source of the event
}
Please help me.
Referring to various articles and doing some trial and errors, finally developed this idea which works perfectly for me just the way i wanted it to happen. The logic was quiet simpler it implement as well The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the Close('X') button.
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
return "";
}
The ConfirmLeave function will give the pop up default message, it case there is any need to customize the message, return the text to be displayed instead of empty string
See if this helps, :)
As far as I know, there is no way of determining what caused the onbeforeunload. The event is triggered when window is about to close whether closing the browser or some other way.
If the close button was pressed the value of e.clientY is negative. For the other possible sources i doubt there is a solution.
window.onbeforeunload = function() {
var e = window.event;
alert(e.clientX + " / " + e.clientY);
}
I searched for something similar but ended up empty handed.
So I tried doing the opposit
We can identify all the events but browser events.
Refer below (Untested) snippet.
var target = $( e.target );
if(!target.is("a, :button, :submit, :input, .btn, .bulkFormButton")){
//Your code for browser events)
}
$("form").submit(function () {
//Your code for browser events)
});
This worked for me but there are still some events that are not handled.
I am in search of those.
If anyone have idea about them please share.