使用VUE监控浏览器窗口关闭时向后台发送请求
因为在项目中实现在线播放视频时,当用户直接关闭浏览器窗口,需要记录用户观看视频的进度所以用到监听窗口关闭事件。先是在网上查了一下,然后根据网上大佬博客然后自己修改之后最终测试成功!下面是代码:<template><div class="video-container"></div></template><script>e...
·
因为在项目中实现在线播放视频时,当用户直接关闭浏览器窗口,需要记录用户观看视频的进度所以用到监听窗口关闭事件。先是在网上查了一下,然后根据网上大佬博客然后自己修改之后最终测试成功!
下面是代码:
<template>
<div class="video-container"></div>
</template>
<script>
export default {
data () {
return {
userId: '',
beforeUnloadTime: '',
gapTime: ''
}
},
mounted () {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
},
methods: {
beforeunloadHandler(){
this.beforeUnloadTime=new Date().getTime();
},
unloadHandler(e){
this.gapTime=new Date().getTime()-this.beforeUnloadTime;
//判断是窗口关闭还是刷新
if(this.gapTime<=5){
var img = document.createElement("img");
//src是自己的后端地址以及参数(参数看自己需求)
img.src = this.$http.adornUrl(`/sys/user/updateUserInfo?userId=${this.userId }&token=${this.$cookie.get('token')}`);
//将img加到body中时就会立刻发送请求
document.body.appendChild(img);
}
}
}
}
</script>
如果有什么问题,欢迎提问相互交流。
更多推荐
已为社区贡献3条内容
所有评论(0)