運(yùn)用的知識點(diǎn)：JavaScript的 onbeforeunload 函數(shù)
使用方法
window.οnbefοreunlοad=function(){
return ‘’;
}
注意：有返回值（' '，true，false...都可以）才能彈出顯示，或者有需要執(zhí)行的事件也行。
onload、onunload、onbeforeunload的執(zhí)行問題：
頁面加載時(shí)只執(zhí)行onload
頁面關(guān)閉時(shí)，先onbeforeunload事件，再onunload事件。
頁面刷新時(shí)先執(zhí)行onbeforeunload，然后onunload，最后onload。
注意：這種執(zhí)行順序是有瀏覽器的兼容問題的，請注意各種瀏覽器的區(qū)別
onbeforeunload() 和onunload() 兩個(gè)事件的區(qū)別：
相同點(diǎn):
兩者都是在對頁面的關(guān)閉或刷新事件作個(gè)操作。
不同點(diǎn)：
unbeforeunload（）事件執(zhí)行的順序在onunload()事件之前發(fā)生。(因?yàn)?，unbeforeunload()是在頁面刷新之前觸發(fā)的事 件，而onubload()是在頁面關(guān)閉之后才會觸發(fā)的)。
unbeforeunload（）事件可以禁止onunload()事件的觸發(fā)。
onunload()事件是無法阻止頁面關(guān)閉的。
瀏覽器的兼容性不同。
vue中監(jiān)聽頁面刷新和離開
方法一：直接在mounted或者activated中寫
mounted() { //寫在mounted或者activated生命周期內(nèi)即可
window.onbeforeunload = e => { //刷新時(shí)彈出提示
return ''
};
},
兼容性更好的寫法：
window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '關(guān)閉提示';
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '關(guān)閉提示';
};
方法二：添加監(jiān)聽
- 在methods生命周期鉤子中定義事件
methods: {
beforeunloadFn (e) {
// ...
}
}
2.在 mounted 或者 activated 鉤子中注冊事件
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}
- 在 destroyed 鉤子卸載事件
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}
參考文章：https://www.jb51.net/article/102461.htm
https://www.cnblogs.com/gavin0517/p/5827405.html
https://blog.csdn.net/tayshin/article/details/73770653
文章僅為本人學(xué)習(xí)過程的一個(gè)記錄，僅供參考，如有問題，歡迎指出！
對博客文章的參考，若原文章博主介意，請聯(lián)系刪除！請?jiān)?br>
————————————————
版權(quán)聲明：本文為CSDN博主「halo1416」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/halo1416/java/article/details/86705437
