vue禁止浏览器F5进行刷新和监听浏览器刷新事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue禁止浏览器F5进行刷新和监听浏览器刷新事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4496字，纯文字阅读大概需要7分钟。
内容图文
项目中有个这样的需求：
进入视频播放页后，添加一个标识，为了防止用户一次播放多个视频，当离开该页面后，如果是从当前正在播放的视频页面离开的，则离开播放页时清除标识，如果是不是则不清除，并且禁止用户按F5进行页面刷新，当用户在正在播放的视频页按浏览器刷新按钮清除标识，当用户复制的视频播放页面url打开的页面，按浏览器刷新按钮，不清除标识。
用户进入视频播放页有两种途径：
1.从列表页点击视频进入视频播放页
2.复制视频播放链接新打开一个窗口粘贴上去
为了解决用户粘贴播放视频url也能正常播放，于是将播放视频的参数放到 params 中，当用户复制链接时，就获取不到播放视频需要的参数了，就直接给用户提示例如：
当用户直接复制链接跳到播放页，再从播放页跳至列表页时不清除，但当用户是从列表页跳至播放页，再在该播放页点击浏览器刷新按钮，则需要清除标识，否则用户再回到列表页点击课件播放时一直提示
解决方案：
列表页跳至播放页：
this
.$router.push({
name: ‘coursewarePlayback‘,
// path: ‘/coursewarePlayback‘, params: {
Ids: data.id,
fileId: data.resourceFileId
}
})
播放页面：
mounted() {
this.haveSeek = false// 先判断是否是复制的 url 进入到播放页面if (!this.$route.params.Ids && !this.$route.params.fileId) {
this.$message({
message: ‘暂未获取到视频信息，请聪列表页重新打开‘,
type: ‘warning‘
});
return
}
//组织F5刷新this.stopF5Refresh()
//监听刷新事件
window.addEventListener(‘beforeunload‘, e => this.beforeunloadHandler(e))
this.getDetailsAct(this.$route.params.Ids)
this.ideovSource = this.ideovUrl + this.$route.params.fileId + "/output.m3u8"
// 初始化播放器
const that = thisthis.player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: this.ideovSource,//视频地址// cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
autoplay: true, // 是否自动播放
width: "100%", // 播放器宽度
height: "610px", // 播放器高度
playsinline: true,
"skinLayout": [
{
"name": "bigPlayButton",
"align": "blabs",
"x": 500,
"y": 300
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "progress",
"align": "blabs",
"x": 0,
"y": 44
},
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "timeDisplay",
"align": "tl",
"x": 10,
"y": 7
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
})
that.currentTime = new Date().getTime()
if (localStorage.getItem(‘havePlay‘) && JSON.parse(localStorage.getItem(‘havePlay‘)).playerId !== that.$route.params.fileId) {
that.player.pause()
that.$message({
message: ‘您已经有正在播放的视屏，不能同时播放多个!‘,
type: ‘warning‘
});
} elseif (!localStorage.getItem(‘havePlay‘)) {
const obj = {
playerId: that.$route.params.fileId,
havePlay: true,
currentTime: that.currentTime
}
localStorage.setItem(‘havePlay‘, JSON.stringify(obj))
}
var _beforeUnload_time = 0, _gap_time = 0;
window.onbeforeunload = function () {
_beforeUnload_time = new Date().getTime();
}
window.onunload = function () {
_gap_time = new Date().getTime() - _beforeUnload_time;
//浏览器关闭if (_gap_time <= 5) {
window.localStorage.removeItem("havePlay");
}
}
//skinLayout设置只显示全屏和音量按钮// 点击播放后调打点方法//视频由暂停恢复为播放时触发。
that.player.on(‘completeSeek‘, function ({paramData}) {
that.haveSeek = true
that.playTime = paramData;
})
//视频由暂停恢复为播放时触发。
that.player.on(‘playing‘, function (e) {
that.playTime = that.player.getCurrentTime();
})
//视频销毁。
that.player.on(‘dispose‘, function (e) {
if (JSON.parse(localStorage.getItem(‘havePlay‘))) {
window.localStorage.removeItem("havePlay");
}
that.clearIntervalFun();
})
},
destroyed() {
window.removeEventListener(‘beforeunload‘, e => this.beforeunloadHandler(e))
if (JSON.parse(localStorage.getItem(‘havePlay‘))&& JSON.parse(localStorage.getItem(‘havePlay‘)).currentTime == this.currentTime) {
window.localStorage.removeItem("havePlay");
}
this.clearIntervalFun();
},
解释：
其中 JSON.parse(localStorage.getItem(‘havePlay‘)).currentTime 是用来判断是否是在当前播放页的，页面一进入先获取当前时间赋值给 播放页的 that.currentTime = new Date().getTime() ,如果是第一次进入播放页，则播放页的时间复制给标识中的时间，只要页面不刷新不关闭，俩一直一样，但如果是刷新了页面，则 播放页的 that.currentTime 会被重新赋值，但标识里的 currentTime 不会被重新赋值，所以用此来做判断当前点击刷新按钮时是否是在正在播放的视频页点击刷新的如果俩时间一样则清除标识，而如果是复制的 url 则俩时间不一样，点击刷新时不清除标识。
//
清除定时器
clearIntervalFun() {
const that = thisif (that.intervalTime) {
clearInterval(that.intervalTime);
that.intervalTime = null;
}
},
//阻止F5刷新 stopF5Refresh() {
document.onkeydown = function (e) {
var evt = window.event || e;
var code = evt.keyCode || evt.which;
if (code == 116) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.keyCode = 0;
evt.returnValue = false
}
}
}
},
//浏览器刷新事件 beforeunloadHandler (e) {
if (JSON.parse(localStorage.getItem(‘havePlay‘))&& JSON.parse(localStorage.getItem(‘havePlay‘)).currentTime == this.currentTime) {
window.localStorage.removeItem("havePlay");
}
},
原文：https://www.cnblogs.com/yingzi1028/p/12916014.html
内容总结
以上是互联网集市为您收集整理的vue禁止浏览器F5进行刷新和监听浏览器刷新事件全部内容，希望文章能够帮你解决vue禁止浏览器F5进行刷新和监听浏览器刷新事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。