Stopping the user from navigating away using `window.onbeforeunload`

Question

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>

FYI, the document.ready here is pointless. `displayAlert` is always immediately invoked. I think you meant `$(document).ready(displayAlert);`, but I'm not sure why you would wait for the DOM to become ready before attaching the event handler. — CodingIntrigue, Apr 02 '15 at 09:37
[`Working Example`](http://jsbin.com/wuhejujotu/1/edit?output) and solution details here [`window.onbeforeunload`](http://stackoverflow.com/a/21455923/769678). Hope it helps! — Shubh, Apr 02 '15 at 09:38
@Shubh yes this works,thankyou. But I just copy pasted,can u explain what is happening? Sorry I dont know javascript. — Sumedha Vangury, Apr 02 '15 at 09:42

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

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');
};

edited May 23 '17 at 12:28

Community

1
1

answered Apr 02 '15 at 10:02

Shubh

6,693
9
48
83

Why does the confirmationMessage appear twice? – Sumedha Vangury Apr 02 '15 at 10:33
Can I convert this into a bootsrap modal? – Sumedha Vangury Apr 02 '15 at 11:10
For Bootstap Modal window you could try something like `$('#my-modal').on('hidden.bs.modal', function () {` [Demo](http://jsfiddle.net/6671he8g/) – Shubh Apr 02 '15 at 11:59
Your demo is a different one, it is not for window.onbeforeunload alert – Sumedha Vangury Apr 02 '15 at 12:03
@sumedha: The reason behind this approach is `onbeforeunload` gets triggered when a `window` is unloading its content and resources. The bootstrap modal window is not a `window` object, so the `onbeforeunload` would not be of much help!. ***Its my understanding though!*** You can raise a different question for more clarifications. – Shubh Apr 02 '15 at 12:16
so are you saying its not possible to display the alert using a bootstrap modal? I tried using the code above given by you and replaced the confirmationMessage string with `$('#cancel_modal').modal('show');` where #cancel_modal is the id for `
` of bootstrap modal, but the o/p was that it showed me both, the windows event alert as well as bootstrap modal.
– Sumedha Vangury Apr 02 '15 at 12:24
Oh! Were you meaning that you want to display a Bootstrap Modal window when user navigates away from the page? – Shubh Apr 02 '15 at 12:26
Yes, I want to display a bootstrap modal when the user tries to navigate away – Sumedha Vangury Apr 02 '15 at 12:27
Please update your question and create a [Fiddle Sample](http://jsfiddle.net/) so that it can refect your current problem. – Shubh Apr 02 '15 at 12:31
try this `window.onbeforeunload = function(event){ event.preventDefault(); $('#cancel_modal').modal('show'); };` – Shubh Apr 02 '15 at 12:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74340/discussion-between-shubh-and-sumedha). – Shubh Apr 02 '15 at 12:35
I don't think so it is possible [help](http://stackoverflow.com/a/6065085/769678) – Shubh Apr 02 '15 at 12:49

Stopping the user from navigating away using `window.onbeforeunload`

1 Answers1

Update