用户关闭页面时弹窗提示

背景

网页很容易碰到这样的需求。网上收到的解决方法如下 

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

 

但是在浏览器上验证下，却没有按照预期弹框

原因

https://bbs.csdn.net/topics/392441581

• 现在浏览器为了优化用户体验，对onbeforeunload 的离开页面提示做出了限制。
  比如最新版的谷歌浏览器，必须要有用户在页面上有点击等操作之后再离开页面才能有提示，如果页面打开后没有用户在页面上点击等操作就离开（关闭）页面就不会有提示。
  另外一般的ide或代码编辑器内嵌浏览器离开（关闭）页面也不会有提示

 

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

• 当该事件返回的字符串（事前设置好的event.returnValue的值）不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。一些浏览器将该事件返回的字符串显示在弹出窗上。从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息代替事件返回的字符串。比如，火狐上会显示“本页面要求您确认您要离开 - 您输入的数据可能不会被保存”，请查阅bug 588292和Chrome Platform Status。

  从2011年5月25日起,  HTML5 规范 声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行,window.showModalDialog(), window.alert(), window.confirm()window.prompt().