页面中的条件 onbeforeunload 事件

Question

window.onbeforeunload = function(evt) {
    var message = 'Are you sure you want to leave the page. All data will be lost!';

    if (typeof evt === 'undefined') {
        evt = window.event;
    }
    if (evt && !($("#a_exit").click)) {
        evt.returnValue = message;
    }
    return message;
};

I want user to leave the page clicking to the link (has id ="a_exit" ) only. In other circumstances such as refreshing the page, clicking another link, user will be prompted that if he/she wants to leave the page. I have tried to use the code above. It still asks me if I want to go away when I click the exit link.

Answer 1

$(window).bind('beforeunload',function() {
    return "'Are you sure you want to leave the page. All data will be lost!";
});

$('#a_exit').live('click',function() {
    $(window).unbind('beforeunload');
});

Above works for me

Answer 2

It will always prompt you if you want to leave the page. It's a security issue and cannot be worked-around .
Moreover, anything you return in the onbeforeunload event handler that is not void will be treated as the message for the prompt. Refer to this article: https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

Answer 3

My quick example of the conditional prompt before leaving page:

    window.onbeforeunload = confirmExit;
    function confirmExit(event) {
        var messageText = tinymce.get('mMessageBody').getContent();
        messageText = messageText.trim();

        // ... whatever you want

        if (messageText != "")
            return true;
        else
            return void (0);
   };

It works under Chrome, FF.

Answer 4

This worked for me.

   window.onbeforeunload = function(){
    if(someBoolean) {
    return 'message'
    }else{
    window.onbeforeunload = null;
    }
    }

Answer 5

您可以在点击处理程序中删除window.onbeforeunload 。

Answer 6

You can return null when you do not want the prompt to show. Tested on Chrome 79.

window.onbeforeunload = () =>  {
    if(shouldPrompt){
       return true
    }else{
       return null
    }
}

BTW modern browser no longer support custom onBeforeUnload promp text.

Answer 7

How about a variable to decide, if the link was clicked?

var exitClicked = false;

$("#a_exit").click(function() {
  exitClicked = true;
});

window.onbeforeunload = function(evt) {
  //...

  if(evt && !exitClicked) {
    evt.returnValue = message;
  }  

  //...
};

You only set exitClicked = true when the link was really clicked and afterwards, before unloading you can simply check this variable.

Answer 8

This is quite old but I wanted just to change the code given that .live is no longer working in Jquery. So, the updated version would be:

$(window).bind('beforeunload',function() {
     return "'Are you sure you want to leave the page. All data will be lost!";
 });

 $('#a_exit').on("click", function(){
    $(window).unbind('beforeunload');
});