快捷導(dǎo)航

vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的方法

更新時(shí)間：2023年09月05日 11:43:15 作者：今天不要寫bug

這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、業(yè)務(wù)場景：

在項(xiàng)目的某些頁面中，在執(zhí)行某些接口調(diào)用過程的時(shí)候，如果用戶選擇刷新、關(guān)閉或者后退瀏覽器。有可能會(huì)造成接口被阻斷，所以可能你會(huì)需要js監(jiān)聽瀏覽器關(guān)閉、刷新、后退事件，在進(jìn)行這些操作的時(shí)候給個(gè)提示。如下圖：

二、實(shí)現(xiàn)方式

1、監(jiān)聽瀏覽器關(guān)閉、刷新，給出提示

methods: {
       handleBeforeUnload(event) {
            // 兼容火狐的做法
            event.preventDefault()
            event.returnValue = ''
            // 展示提示消息 
            // （這里其實(shí)修改默認(rèn)提示語是不生效的，不過我的業(yè)務(wù)場景不需要修改默認(rèn)提示語
            // 我也沒找到能修改的方法，有大佬知道的話麻煩告知）
            const message = '確定要離開嗎？'
            event.returnValue = message
            return message
        }
},
 mounted() {
        window.addEventListener('beforeunload', this.handleBeforeUnload)
        window.addEventListener('unload', this.handleBeforeUnload)
    },
    destroyed() {
        window.removeEventListener('beforeunload', this.handleBeforeUnload)
        window.removeEventListener('unload', this.handleBeforeUnload)
    },

2、監(jiān)聽瀏覽器后退，給出提示

methods:{
      onPopState(e) {
                // 監(jiān)聽到瀏覽器回退事件（這里提示用的confirm，是可以自定義的）
                if (confirm('離開當(dāng)前頁面數(shù)據(jù)可能會(huì)丟失，您確定離開當(dāng)前頁面嗎？')) {
                    // 點(diǎn)擊確定回退
                    window.removeEventListener('popstate', this.onPopState)
                    window.history.go(-1)
                } else {
                    // 點(diǎn)擊取消不回退
                    window.history.pushState(null, null, window.location.href)
                }
        },
      }，
     mounted() {
	        // 添加 popstate 事件監(jiān)聽
	        window.history.pushState(null, null, window.location.href);
	        window.addEventListener('popstate', this.onPopState);
       },
    beforeDestroy() {
        // 在組件銷毀前，移除 popstate 事件監(jiān)聽
        window.removeEventListener('popstate', this.onPopState)
    }

總結(jié)

到此這篇關(guān)于vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的文章就介紹到這了,更多相關(guān)vue用js監(jiān)聽瀏覽器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: