vue禁止浏览器F5进行刷新和监听浏览器刷新事件

Posted 2021-02-18 yingzi1028

项目中有个这样的需求：

进入视频播放页后，添加一个标识，为了防止用户一次播放多个视频，当离开该页面后，如果是从当前正在播放的视频页面离开的，则离开播放页时清除标识，如果是不是则不清除，并且禁止用户按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 = this
            this.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‘
                });
            } else if (!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 = this
                if (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");
                }
            },