监听页面离开事件
有一些需要统计登出时间,或者用户离开的时间点等需求,这种需要监听用户离开网页,关闭网页的事件。
pc端有 unload,beforeunload等事件 进行监听
js代码:
<body onunload="goodbye()"> //window window.onbeforeunload=function(e){ var e = window.event||e; e.returnValue=("确定离开当前页面吗?"); }
但是移动端并没有关闭浏览器的x或者按钮,移动端关闭浏览器,相当于杀死进程,来关闭,(安全因素)我们是无法监听客户端杀死进程的操作的。
以下这种方法,通用于pc+移动端,能较好地兼容;
通过监听visibilityState的值来判断,用户是否离开了页面 详细介绍
测试机型:
window 谷歌 火狐
ios 微信浏览器,自带浏览器,qq浏览器
小米手机 小米浏览器,微信浏览器,qq浏览器
均可使用。
<script> var p=document.createElement('p'); p.innerHTML='出去了' var p1=document.createElement('p'); p1.innerHTML='回来了' var body=document.getElementsByTagName('body')[0] document.addEventListener('visibilitychange', function () { // 用户离开了当前页面 if (document.visibilityState === 'hidden') { body.appendChild(p) } // 用户打开或回到页面 if (document.visibilityState === 'visible') { body.appendChild(p1) } }); </script>