每天一个jquery插件-用户是否在
用户是否在
判断用户是否在当前页面或者跳转到其他页面去了，是一个很常见的动作，用来节省网络开销减轻服务器压力或者特定需求都会考虑这个动作，所以我们收集了下面三种常用的方式来，做笔记啦今天
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监控知道用户是不是在浏览当前页面</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
</body>
</html>
<script>
$(function(){
//第一种办法，直接监控最外面一层dom的鼠标移出移入事件，不过有误差
$(document).mouseenter(function(){
console.log(1)
})
$(document).mouseleave(function(){
console.log(2)
})
//第二种办法
document.addEventListener('visibilitychange', function() {
if (document.visibilityState == 'hidden') {
document.title = '离开';
}
if (document.visibilityState == 'visible') {
document.title = '回来';
}
});
//第三种办法
document.addEventListener('visibilitychange',function(){
var isHidden = document.hidden;
if(isHidden){
console.log(3)
} else {
console.log(4)
}
});
})
</script>
理解
- 第一种办法，因为网页本身就是一个超大的文档，浏览器与文档并不是一个东西，所以你是可以通过鼠标知道用户有没有移出当前页面，但是挑没跳转就不知道了
- 第二种办法，原生的有visibilitychange这个动作，他就是在当前页面状态发生变化时调用回调，然后在这个回调中你就能通过document.visibilityState关联改动的值来进行判断是否离开，当然这个属性并不只是只有visible与hidden两种，还有更多
- 第三种办法，同样是上面的动作，假如你只要处理离开和回来的动作，那么 document.hidden可能比第二种更符合你的要求，它只会有false与true对应离开与存在。
- 这个功能的效果本来是想做进之前的看板娘作为一个对话的事件的，比如有的人的博客你一定见过他们页面的标题会在浏览器的小卡片里面频繁改动，然后用看板娘的语气让你回去或者说欢迎回来之类的话，那不就是这个部分的功能实现的嘛
- 完事，碎觉