javascript - 为什么当用户关闭 chrome 中的选项卡时弹出？

Question

你能告诉我为什么当用户关闭 chrome 中的选项卡时不显示弹出屏幕或警告吗？ 这是我的代码

http://plnkr.co/edit/Whospoc9SLVe6gjbsVWc?p=preview

通过此链接在选项卡上运行代码 http://run.plnkr.co/Tj9w5LalKQmE9w1w/

$scope.$on('onUnload', function (e) {
            alert('onBeforeUnlccoad')

        console.log('leaving page');
    });

    $scope.$on('onBeforeUnload', function (e) {
        alert('onBeforeUnload')
        console.log('leaving page');
    });

Answer 1

我认为 onbeforeunload 规范最近悄然发生了变化。让 angular 放在一边并检查应该工作的基本示例。

window.onbeforeunload = function(e) {
  alert('test');
  console.log('test')
  e.returnValue = 'test';
  return 'test';
};

这段简单的代码处理 onbeforeunload 事件。 例如，它在最新的 chrome 中的表现如何。

• 它显示浏览器离开站点的默认消息，带有带有离开和取消按钮的确认框
• console.log 被执行
• 警告、提示和其他阻止 javascript 执行的东西会自动被阻止。
• 我还观察到，如果我们用上面的代码打开一个页面，并且不会在没有任何消息的情况下与页面关闭选项卡进行任何交互，当我们做任何事情时情况会发生变化，比如点击空白处，在这种情况下默认将出现确认框并显示控制台日志

甚至可以在这里发送 ajax 请求，例如:

 window.onbeforeunload = function(e) {
  alert('test');
  console.log('test');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'send-ajax-data.php');
  xhr.send(null);

  e.returnValue = 'test';
  return 'test';
};

显示默认浏览器提示，并在后台发送 ajax 请求。因此，如果在用户确认离开网站之前完成一些异步操作，则可以完成这些操作。

所以总而言之，我认为您想要实现的目标是不可能的。因为有默认的浏览器提示，所以不能用自定义模态替换。 Alers 也不能被执行。