网页页面退出检测- 解决unload onbeforunload不好用

网页页面退出检测

写在2020-03-11，亲测可用~~ 拒绝转载抄袭，误人子弟！！！

最近写代码的时候遇到一个问题，那就是需要检测网页退出状态。本来寻思上网搜索一下，发现CSDN上全是拷贝的，要不就是好多年前的东西，根本没法用。
其实网上大多数是使用unload & onbeforeunload 进行检测的。包括某鸟教程。里面的的代码都大同小异，反正归根结底就是不好用。

方案1，使用visibilityState

网上的介绍一大堆我就不抄了，主要就是这个东西可以做到什么手机、电脑页面的可见处理。具体兼容性和属性都可以看看MDN上的介绍。里面的 hidden 属性在“用户不可见（发挥想象，什么换了个网页标签，后台，最小化，关闭）“ 的时候会被检测到。具体代码如下：

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }

  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

这个东西还可以像樊小书生 的CSDN 学习。

一般在项目中，用户登录之后有消息通知的时候，用户头像上面会有一个消息数来提醒用户，但这个数字要保证新打开一个页面的时候是正确的，当切换浏览器的tab再回来的时候还要保证正确性。 摘抄自樊小书生 的CSDN介绍，侵删。

但是这种情况也有缺点，我不要什么不可见，我就要关闭！那就往下接着看咯~

方案2，使用 sendBeacon 方法

这种描述都可一看(MDN)[https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon] 。这个东西还是很好的，会发POST给指定的URL。这样就能很好的解决就想要关闭时执行。参考代码：

window.addEventListener('unload', function(event){
	navigator.sendBeacon(URL, analyticsData);

});

我是小白就解释给小白看下。 里面 “URL就是要post 内容的地址，比如要是用cgi的话可能就是 setup_cgi 之类的，类似于form 里面的action属性。analyicsData 就是要post的内容了，可以把要发的放进字符变量中进行传入。”