業(yè)務(wù)場景

在Web應(yīng)用開發(fā)中，我們經(jīng)常會(huì)遇到這樣的需求：在用戶執(zhí)行關(guān)鍵操作，如提交表單、支付交易等過程中，突然關(guān)閉、刷新或者后退瀏覽器，可能會(huì)導(dǎo)致操作未完成或者數(shù)據(jù)丟失。為了提高用戶體驗(yàn)和保證應(yīng)用數(shù)據(jù)的完整性，我們需要合理地使用JavaScript來監(jiān)聽瀏覽器關(guān)閉、刷新、后退事件，并作出相應(yīng)處理。

實(shí)現(xiàn)方案

監(jiān)聽beforeunload事件

beforeunload事件是在頁面即將卸載時(shí)觸發(fā)的，這通常發(fā)生在用戶關(guān)閉或刷新頁面之前。我們可以利用這個(gè)事件來提示用戶確認(rèn)是否真的需要離開當(dāng)前頁面。

window.addEventListener('beforeunload', function (e) {
    // 兼容不同瀏覽器的提示方式
    var confirmationMessage = '您確定要離開嗎？';
    e.returnValue = confirmationMessage;  // Gecko, Trident, Chrome 34+
    return confirmationMessage;           // Gecko, WebKit, Chrome <34
});

監(jiān)聽unload事件

當(dāng)文檔被完全卸載后，unload事件會(huì)被觸發(fā)。該事件可以用來執(zhí)行一些清理操作，比如清除cookies，記錄日志等。

window.addEventListener('unload', function(event) {
    // 執(zhí)行一些清理操作
});

監(jiān)聽瀏覽器后退按鈕事件

瀏覽器后退按鈕觸發(fā)的是popstate事件，它通常與HTML5的歷史API結(jié)合使用。在Vue項(xiàng)目中，如果你使用vue-router管理路由，可以如下監(jiān)聽路由變化來處理后退按鈕的行為：

router.beforeEach((to, from, next) => {
    // 可以在這里處理后退邏輯
    // to 和 from 是路由對象
    next(); // 確保要調(diào)用next()方法，否則鉤子就不會(huì)被resolved
});

另外，你也可以直接監(jiān)聽popstate事件來處理后退操作：

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)
}

區(qū)分瀏覽器刷新與關(guān)閉

對于瀏覽器刷新事件的監(jiān)聽，雖然它會(huì)觸發(fā)beforeunload事件，但有時(shí)我們需要區(qū)分頁面是被刷新還是被關(guān)閉。這可以通過一些技巧來實(shí)現(xiàn)，例如使用sessionStorage。

if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
    console.info("這是一個(gè)刷新頁面的操作");
} else {
    console.info("這是一個(gè)新訪問頁面的操作");
}

請注意，performance.navigation特性已不推薦使用，因?yàn)樗驯粡U棄并不被所有瀏覽器支持。取而代之的是Navigation Timing API，盡管如此，這個(gè)API也不能直接檢測刷新事件。

在使用上述事件時(shí)，我們應(yīng)當(dāng)小心謹(jǐn)慎，避免阻礙用戶的正常操作。特別是beforeunload事件，如果不是非常必要，最好不要使用，因?yàn)樗赡軙?huì)影響用戶體驗(yàn)。我們應(yīng)該只在用戶可能會(huì)丟失重要數(shù)據(jù)的情況下使用警告提示。

附：vue如何區(qū)別瀏覽器刷新和關(guān)閉

知識點(diǎn)

瀏覽器關(guān)閉執(zhí)行的是 beforeunload ， unload 這兩個(gè)事件；

而瀏覽器刷新執(zhí)行的是beforeunload， unload， load 三個(gè)事件；

思路

雖然刷新與關(guān)閉都會(huì)走onbeforeunload與onunload，但可能因?yàn)樗⑿略诩虞d新頁面前內(nèi)部機(jī)制還需要做一些準(zhǔn)備工作，所以刷新事件在執(zhí)行到onunload事件時(shí)，用的時(shí)間會(huì)比關(guān)閉事件時(shí)間長。

所以，通過時(shí)間差來判斷瀏覽器是刷新還是關(guān)閉，瀏覽器執(zhí)行beforeunload的時(shí)候給一個(gè)開始時(shí)間，執(zhí)行unload的時(shí)候給一個(gè)結(jié)束時(shí)間；判斷一下時(shí)間差；我設(shè)置的是5毫秒來區(qū)分瀏覽器的關(guān)閉和刷新，具體的時(shí)間最好還是親自測一下；

代碼

 mounted() {
    let beginTime = 0; //開始時(shí)間
    let differTime = 0; //時(shí)間差
    window.onunload = function () {
      differTime = new Date().getTime() - beginTime;
      if (differTime <= 5) {
        console.log("這是關(guān)閉");
      } else {
        console.log("這是刷新");
      }
    };

    window.onbeforeunload = function () {
      beginTime = new Date().getTime();
    };
  },
};

本人親測有效

總結(jié)

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

最新評論