javascript - 如果 AJAX 响应成功，则取消/删除/禁用 beforeunload 事件监听器

Question

在我的 Android Web 应用程序页面中，浏览器可以在错误刷新页面时警告用户:

<script>
    window.onbeforeunload = function(e) {
       var dialogText = 'Dialog text here';
       e.returnValue = dialogText;
       return dialogText;
    };
</script>

运行良好。但在我的 AJAX 调用中(如果保存过程成功)我会自动将用户重定向到主页。 (用户不应停留在同一页面)我的工作代码是:

$.ajax({
       url: '{{ url()->current() }}',
       type: 'POST',
       data: $('#mainForm').serializeArray(),
       beforeSend: function (xhr) {
              $.LoadingOverlay("show");
       },
       error: function(xhr,status,error){ 
              $.LoadingOverlay("hide");
              swal('Error','bla bla bla!', 'error');
       },
       success: function(result, status, xhr){
              if(result.hasOwnProperty('success')){ 
                   /* Here i want to disable beforeunload */
                   window.location.href = "{{ url('m') }}";
              }else if(result.hasOwnProperty('error')){
                   swal('Error',result.error, 'error');
              }else{
                   swal('Error',"bla bla bla ", 'error');
              }
       },
       complete: function(xhr){
              $.LoadingOverlay("hide");
       }
 });

在成功的情况下，我不希望用户决定保留此页面或重定向到新位置。我想自动将用户重定向到新位置。

我已经尝试过this解决方案:

window.onbeforeunload = function () {
  // blank function do nothing
}

或者

window.onbeforeunload = null;

或this

function functionToRun(e){
     if(sessionStorage.token != "abide" ){
        // call api
     }
}

window.removeEventListener("beforeunload",functionToRun);

我无法解决我的问题。

Answer 1

removeEventListener 应该可以工作，但您应该命名您的 beforeunload 处理程序:

function onBeforeUnload(e) {
    var dialogText = 'Dialog text here';
    e.returnValue = dialogText;
    return dialogText;
};    
window.addEventListener('beforeunload', onBeforeUnload);

在您的成功回调中:

window.removeEventListener('beforeunload', onBeforeUnload);