I want to show custom alert box instead of browser default alert box when user tries to navigate from the existing page. Using this code:
window.onbeforeunload = function(){
return "are you sure?";
}
I can use this code to alert user if he has any unsaved data and want to leave page. But I want to make custom alert box with my own design like facebook does. How it is possible? Something like:
window.onbeforeunload = function(){
myownalertbox.show(); //here I want to bind leave page or stay on page button with my own button.
}
And I want to bind stay on this page and leave this page button to my button.
The problem is not with implementing custom alert boxes (as some of the other answers pointing it out), that's not a hard thing to do, there are plenty of solutions, framework, plugin, etc. The problem is JavaScript execution timing.
Using the onbeforeunload handler it's impossible to achieve your goal, because it needs to run "synchronously": you cannot display the alert, return something and then later with some callback get back and return the actual value. When you return from the function, the result will be used by the browser, and you will end up having your custom alert box shown, but the user action will be "lost", because the handler has already been finished.
To go further, I've never been able to find any solution which would provide a custom alert box, which behaves synchronously in this sense. By synchronous behavior I mean that code execution would be blocked until a user clicks on alert buttons. Every custom alert/confirm/prompt solution I've seen was using callbacks. And last but not least JavaScript doesn't even provide a way for kind of a "blocking waiting".
UPDATE
What you can do (and Facebook does it too) is to handle navigation links, buttons, clicks, etc. which you know that will leave the page, and there you can show a custom confirmation box.
Note: Actually I've tried Facebook, and for me (Windows 10, Chrome latest) it prompts the default confirmation box when I tried to close the browser tab, not any custom one. But when I clicked on a link, it indeed showed a custom confirmation box. So to summarize, Facebook, when possible, uses the custom one, and when not possible (only with onbeforeunload, like browser close, tab close, page reload, URL navigation, etc.) it uses the default handling mechanism.
Note 2: For 2016 it seems like all major browsers chose to not let developers customize the message which is shown on onbeforeunload, so your string return value from the handler will not be taken as the message. There are several articles about this. The main reason is safety, as lots of sites used it for tricking naive users and asking them do do some actions, or prompting them malicious content, etc. Now all major browsers display a default message about possibly having unsaved changes.
The orginal answer is suitable for IE6-8 and FX1-3.5 , but is rather out of date now and won't work in most current browsers - I've left it below for reference.
The window.onbeforeunload is not treated consistently by all browsers. It should be a function reference and not a string (as the original answer stated) but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload (including a function that returns null).
You set window.onbeforeunload to a function reference, but in older browsers you have to set the returnValue of the event instead of just returning a string:
var confirmOnPageExit = function (e)
{
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = 'Any text will block the navigation and display a prompt';
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
You can't have that confirmOnPageExit do the check and return null if you want the user to continue without the message. You still need to remove the event to reliably turn it on and off:
// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;
// Turn it off - remove the function entirely
window.onbeforeunload = null;
To turn it on:
window.onbeforeunload = "Are you sure you want to leave?";
To turn it off:
window.onbeforeunload = null;
Bear in mind that this isn't a normal event - you can't bind to it in the standard way.
To check for values? That depends on your validation framework.
In jQuery this could be something like (very basic example):
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});
I would use some normal HTML layout, and play with CSS's display:none;/display:block;
For instance (you do your styling):
CSS:
.popup {
display: none;
position: absolute;
left: 20%;
top: 20%;
height: 60%;
width: 60%;
background-color: orange;
}
JAVASCRIPT:
var myownalertbox = {
show: function(message) {
var popup = document.createElement("DIV");
popup.className = "popup";
document.body.appendChild(popup);
popup.style.display = "block";
popup.innerHTML = message;
var ybutton = document.createElement("BUTTON");
ybutton.innerHTML = "YES";
var nbutton = document.createElement("BUTTON");
nbutton.innerHTML = "NO";
ybutton.onclick = function () {
// do with "YES"
window.location = "/main.html"; // <-- go back to the main page
popup.style.display = "none";
}
nbutton.onclick = function () {
// do with "NO"
window.location = "#"; // <-- stay at this page
popup.style.display = "none";
}
popup.appendChild(ybutton);
popup.appendChild(nbutton);
}
}
myownalertbox.show("ARE YOU SURE?");
Here's a JSFiddle.
You can try this website.
http://t4t5.github.io/sweetalert/
It is not a custom alert box but it provides alert box that are actually quite beautiful.
I am attaching you a link from where I used code to customize my dialog/alert boxes. Hope this might help you.
http://www.bitrepository.com/stylish-javascript-dialog-boxes.html
Related
When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}
When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}
When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}
I have a form where the input fields are saved onChange. In Firefox (5) this works even when the window is closed, but for Chrome and IE it doesn't and I need to be sure that I'm saving this data even if they try to close the window after they've typed in a field but an onBlur event hasn't occurred (i.e. they've typed something into a textbox, but haven't tabbed out of it).
I have read the following SO articles on using window.onbeforeunload:
article 1
article 2
if I use the following:
window.onbeforeunload = function() {
return "onbeforeunload";
}
then I get a popup with onbeforeunload in.
but if I try:
window.onbeforeunload = function() {
alert("onbeforeunload");
}
then nothing happens in any browser, even Firefox.
what I want to achieve is:
window.onbeforeunload = function() {
saveFormData();
}
I'd be grateful if someone could point out where I might be going wrong.
You have to return from the onbeforeunload:
window.onbeforeunload = function() {
saveFormData();
return null;
}
function saveFormData() {
console.log('saved');
}
UPDATE
as per comments, alert does not seem to be working on newer versions anymore, anything else goes :)
FROM MDN
Since 25 May 2011, the HTML5 specification states that calls to window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.
It is also suggested to use this through the addEventListener interface:
You can and should handle this event through window.addEventListener() and the beforeunload event.
The updated code will now look like this:
window.addEventListener("beforeunload", function (e) {
saveFormData();
(e || window.event).returnValue = null;
return null;
});
There seems to be a lot of misinformation about how to use this event going around (even in upvoted answers on this page).
The onbeforeunload event API is supplied by the browser for a specific purpose: The only thing you can do that's worth doing in this method is to return a string which the browser will then prompt to the user to indicate to them that action should be taken before they navigate away from the page. You CANNOT prevent them from navigating away from a page (imagine what a nightmare that would be for the end user).
Because browsers use a confirm prompt to show the user the string you returned from your event listener, you can't do anything else in the method either (like perform an ajax request).
In an application I wrote, I want to prompt the user to let them know they have unsaved changes before they leave the page. The browser prompts them with the message and, after that, it's out of my hands, the user can choose to stay or leave, but you no longer have control of the application at that point.
An example of how I use it (pseudo code):
onbeforeunload = function() {
if(Application.hasUnsavedChanges()) {
return 'You have unsaved changes. Please save them before leaving this page';
}
};
If (and only if) the application has unsaved changes, then the browser prompts the user to either ignore my message (and leave the page anyway) or to not leave the page. If they choose to leave the page anyway, too bad, there's nothing you can do (nor should be able to do) about it.
The reason why nothing happens when you use 'alert()' is probably as explained by MDN: "The HTML specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event."
But there is also another reason why you might not see the warning at all, whether it calls alert() or not, also explained on the same site:
"... browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with"
That is what I see with current versions of Chrome and FireFox. I open my page which has beforeunload handler set up with this code:
window.addEventListener
('beforeunload'
, function (evt)
{ evt.preventDefault();
evt.returnValue = 'Hello';
return "hello 2222"
}
);
If I do not click on my page, in other words "do not interact" with it, and click the close-button, the window closes without warning.
But if I click on the page before trying to close the window or tab, I DO get the warning, and can cancel the closing of the window.
So these browsers are "smart" (and user-friendly) in that if you have not done anything with the page, it can not have any user-input that would need saving, so they will close the window without any warnings.
Consider that without this feature any site might selfishly ask you: "Do you really want to leave our site?", when you have already clearly indicated your intention to leave their site.
SEE:
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
I seem to be a bit late to the party and much more of a beginner than any expertise; BUT this worked for me:
window.onbeforeunload = function() {
return false;
};
I placed this as an inline script immediately after my Head and Meta elements, like this:
<script>
window.onbeforeunload = function() {
return false;
}
</script>
This page seems to me to be highly relevant to the originator's requirement (especially the sections headed window.onunload and window.onbeforeunload):
https://javascript.info/onload-ondomcontentloaded
Hoping this helps.
you just cant do alert() in onbeforeunload, anything else works
To pop a message when the user is leaving the page to confirm leaving, you just do:
<script>
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
To call a function:
<script>
window.onbeforeunload = function(e) {
callSomeFunction();
return null;
};
</script>
Yes what everybody says above.
For your immediate situation, instead of onChange, you can use onInput, new in html5. The input event is the same, but it'll fire upon every keystroke, regardless of the focus. Also works on selects and all the rest just like onChange.
edit: As my question seems unclear - all i want is to add confirm() message whenever the user leaves the page by closing browser/typing new link/clicking existing link
I've read a lot of topics concerned beforeunload/unload events, but none of those actually could helped me, may be i'm doing smth wrong.
I have the script working by clicking all the links, however 'beforeunload' event does not work in my situation
normal script
$('a').on('mousedown', function(){
var message = 'You are about to leave the page. Continue?'
var result = confirm(message)
if (result) {
// some stuff
} else {
// some other stuff
}
})
trying with beforeunload
$(window).on('beforeunload', function(){
var message = 'You are about to leave the page. Continue?'
var result = confirm(message)
if (result) {
// some stuff
} else {
// some other stuff
}
})
And nothing is happening. I've tried unload event too, but still no luck.
beforeunload events are a little odd. Most browsers won't allow you to trigger a confirm dialogue from the handler since that would allow the site to continuously pop up confirm dialogues rather than navigating away from the page. Instead, you should return the message you want to display, for example:
$(window).on('beforeunload', function(e) {
var msg = 'You are about to leave the page. Continue?';
(e || window.event).returnValue = msg; //IE + Gecko
return msg; //Webkit
});
If you want to run additional javascript after the resultant dialogue has exited, add an onunload listener.
EDIT
As is pointed out in the comments, these events differ from browser to browser. For example, the latest version of gecko (firefox) does not allow custom messages.