如何知道用户是否点击了Javascript onbeforeunload对话框上的取消？

5 回答

• 47

  你可以这样做：

  $(function() {
      $(window).bind('beforeunload', function() {
          setTimeout(function() {
              setTimeout(function() {
                  $(document.body).css('background-color', 'red');
              }, 1000);
          },1);
          return 'are you sure';
      });
  });
  

  第一个 setTimeout 方法中的代码延迟为1毫秒 . 这只是将函数添加到 UI queue 中 . 由于 setTimeout 异步运行，Javascript解释器将通过直接调用 return 语句继续，后者又会触发浏览器 modal dialog . 这将阻止 UI queue ，并且不会执行第一个 setTimeout 的代码，直到模态关闭 . 如果用户按下取消，它将触发另一个在大约一秒钟内触发的setTimeout . 如果用户确认为ok，则用户将重定向，并且永远不会触发第二个setTimeout .

  示例：http://www.jsfiddle.net/NdyGJ/2/

  回复于 2024-04-28T06:55:41+08:00
• 1

  我知道这个问题现在已经过时了，但是如果有人仍然遇到这个问题，我找到了一个似乎对我有用的解决方案，

  基本上 unload 事件在 beforeunload 事件之后被触发 . 我们可以使用它来取消在 beforeunload 事件中创建的超时，修改jAndy的答案：

  $(function() {
      var beforeUnloadTimeout = 0 ;
      $(window).bind('beforeunload', function()  {
          console.log('beforeunload');
          beforeUnloadTimeout = setTimeout(function() {
              console.log('settimeout function');
              $(document.body).css('background-color', 'red');
          },500);
          return 'are you sure';
      });
      $(window).bind('unload', function() {
          console.log('unload');
          if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
              clearTimeout(beforeUnloadTimeout);
      });
  });
  

  EDIT: jsfiddle here

  回复于 2024-04-28T06:55:41+08:00
• -6

  我不认为这是可能的，但只是尝试了这个想法并且它有效（虽然它是一些黑客，可能在所有浏览器中都不一样）：

  window.onbeforeunload = function () {   
    $('body').mousemove(checkunload);
    return "Sure thing"; 
  };
  
  function checkunload() {   
    $('body').unbind("mousemove");
    //ADD CODE TO RUN IF CANCEL WAS CLICKED
  }
  

  回复于 2024-04-28T06:55:41+08:00
• 2

  不可能 . 也许有人会证明我错了......你想要运行什么代码？要点击取消时要自动保存吗？这听起来违反直觉 . 如果你还没有自动保存，我认为当它们点击“取消”时自动保存是没有意义的 . 也许您可以突出显示onbeforeunload处理程序中的保存按钮，以便用户在导航之前看到他们需要做什么 .

  回复于 2024-04-28T06:55:41+08:00
• 5

  window.onbeforeunload  = function() {
      if (confirm('Do you want to navigate away from this page?')) {
          alert('Saving work...(OK clicked)')
      } else {
          alert('Saving work...(canceled clicked)')
          return false
      }
   }
  

  使用此代码，如果用户在IE8中单击“取消”，则会出现默认导航对话框 .

  回复于 2024-04-28T06:55:41+08:00