vue禁止瀏覽器F5進行刷新和監聽瀏覽器刷新事件

項目中有個這樣的需求：

進入視頻播放頁后，添加一個標識，為了防止用戶一次播放多個視頻，當離開該頁面后，如果是從當前正在播放的視頻頁面離開的，則離開播放頁時清除標識，如果是不是則不清除，並且禁止用戶按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");
                }
            },