I have this portion of code that works on all browsers except on Safari 10.* (iOS and OSX)
The problem is that Safari fires the beforeunload event but it doesn't display on the confirmation message
function goodbye(e) {
console.log("goodbye");
en = false;
e = e || window.event;
e.cancelBubble = true;
e.returnValue = msg;
if (!en) {
e.preventDefault();
if(e.stopPropagation)
e.stopPropagation();
return e.returnValue;
}
}
jQuery(window).bind("beforeunload", goodbye);
The good bye message is displayed from the console, so the event is fired on Safari, but the confirmation message (also tried to return confirm(msg); instead of return e.returnValue; ) is not displayed. Spent a lot of hours on that and have seen a lot of questions here on SO but noone seems to have a working solution.
EDIT
it's happening something strange here. If I load the page and refresh once, the message is appearing, then if I leave the page clicking on the leave button and re-refresh it on the same window tab, the message is not appearing.
Related
There are some way of detecting a close event from tab/browser without close when i click in other links in page or forms and valid for all browser, i tested "beforeunload" and other replies about this topic here and not working, i am testing in Firefox and Chrome
This is not working :
window.onbeforeunload = function (event) {
var message = 'Important: Please click on \'Save\' button to leave this page.';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
}
return message;
};
Same when i close the tab or the browser is doing nothing; but yes when i click a link
I am trying using following code-
window.onunload = function(e){
return "Do you really want to quit without saving."
}
**
But message is also appearing if I will try to navigate from one page
to another
**. I only want this functionality if user clicks on the [x] button not on any event change.
I have also tried following-
window.onbeforeunload = function(e){
return "Somethig"
}
Note- I want to identify the event when user only closing the browser, not for any other page event.
Using Jquery:
$(window).unload(function() {
//your code
});
using javasscript:
window.onbeforeunload = function(e){
var displaymessage = 'Are you sure?';
e = e || window.event;
if(e)
e.returnValue = displaymessage;
return displaymessage;
}
This question is a duplicate of this question.
You can't modify the default dialogue for onbeforeunload, so your best bet may be to work with it.
Also, in recent versions of Chrome, the feature has been deprecated.
Edit 09/04/2018: custom messages in onbeforeunload dialogs are deprecated since chrome-51 (cf: release note)
Found a working script on the internet, except that I can't change the message for FF. Which would be great. (Works for Chrome)
window.onbeforeunload = function(e) {
if(!e) e = window.event;
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?';
if(e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
};
What ever, this works great. But I wanna do something when the user clicks on abort to keep visiting the page.
How I could do that?
You could use a timed function to do something if user decides to stay on page. The confirmbox shown by onbeforeunload is blocking the execution untill user clicks either OK or Cancel. If Cancel will be clicked, the timed function will be executed, otherwise the page is closed, and the timed function will never be executed.
The code would be something like this:
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = 'Do you want to leave the page?';
setTimeout(function () { // Timeout to wait for user response
setTimeout(function () { // Timeout to wait onunload, if not fired then this will be executed
console.log('User stayed on the page.');
}, 50)}, 50);
return 'Do you want to leave the page?';
});
A working demo at jsFiddle.
You can't show a message in the confirmbox in FF for the reason explained in the accepted answer in the post RGraham has linked in their comment.
I am trying to display an alert when the user clicks the back, forward or refresh browser buttons, but I am not getting the desired output...
<script type="text/javascript">
$(document).ready(displayAlert());
function displayAlert() {
window.onbeforeunload = function () {
return "Are you sure want to LOGOUT the session ?";
};
}
</script>
WindowEventHandlers.onunload The unload event is raised when the window is unloading its content and resources. The resources removal is processed after the unload event occurs.
window.onunload = funcRef;
WindowEventHandlers.onbeforeunload An event that fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};
IE has issues with onload event and Opera has with onbeforeunload. So to reach to a solution which would handle both the situations I came across user3253009 answer
/*Code Start*/
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Cookies for you.. If you stay back!!?'; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
/*Code End*/
Gist. Hope it helps!
Update
If you want to show a Bootstrap Modal when user is navigating away from you page,then you can try something like below:
window.onbeforeunload = function(event) {
event.preventDefault();
$('#cancel_modal').modal('show');
};
I am trying to display confirmation box using window.confirm on window unload event.
If a user clicks on the OK button on confirmation box then I want to call one function and if user clicks the CANCEL button then window should be get closed.
My code is:
<script>
function confirmit(){
var result=window.confirm("Are you sure?");
if(result) {
// close all child windows
} else{
// window should not get close
}
}
</script>
<body onunload='confirmit();' >
But the problem is if I click on CANCEL button, window is getting closed.
Please help me.
You can't prevent unload to stop the page from unloading. You need to bind to onbeforeunload instead. You should just return the string you want to display to the user from the event handler (note that in some browsers the string may not be displayed)
<script type="text/javascript">
window.onbeforeunload = function(e){
var msg = 'Are you sure?';
e = e || window.event;
if(e)
e.returnValue = msg;
return msg;
}
</script>
More info here
JSFiddle Example here
change your code to this to make it work cross-browser:
<script>
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Do you really want to exit?';
}
// For Safari
return 'Do you really want to exit?';
};
</script>
<body>
...
note that this is using the onbeforeunload-event (more information / view an example) where the return-value has to be the message that should be shown to the user.
i don't know if you'll have a chance to react on the confirmation to do something after that (closing child-windows for example), but i don't think so.