快捷導(dǎo)航

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

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

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

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

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

二、實現(xiàn)方式

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

methods: {
       handleBeforeUnload(event) {
            // 兼容火狐的做法
            event.preventDefault()
            event.returnValue = ''
            // 展示提示消息 
            // （這里其實修改默認提示語是不生效的，不過我的業(yè)務(wù)場景不需要修改默認提示語
            // 我也沒找到能修改的方法，有大佬知道的話麻煩告知）
            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ù)可能會丟失，您確定離開當(dāng)前頁面嗎？')) {
                    // 點擊確定回退
                    window.removeEventListener('popstate', this.onPopState)
                    window.history.go(-1)
                } else {
                    // 點擊取消不回退
                    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)
    }