運(yùn)用的知識(shí)點(diǎn)：JavaScript的 onbeforeunload 函數(shù)
使用方法
window.οnbefοreunlοad=function(){
return ‘’;
}
注意：有返回值（' '，true并徘，false...都可以）才能彈出顯示，或者有需要執(zhí)行的事件也行。
onload、onunload默蚌、onbeforeunload的執(zhí)行問(wèn)題：
頁(yè)面加載時(shí)只執(zhí)行onload
頁(yè)面關(guān)閉時(shí)，先onbeforeunload事件流椒，再onunload事件敏簿。
頁(yè)面刷新時(shí)先執(zhí)行onbeforeunload明也，然后onunload宣虾，最后onload。
注意：這種執(zhí)行順序是有瀏覽器的兼容問(wèn)題的温数，請(qǐng)注意各種瀏覽器的區(qū)別
onbeforeunload() 和onunload() 兩個(gè)事件的區(qū)別：
相同點(diǎn):
兩者都是在對(duì)頁(yè)面的關(guān)閉或刷新事件作個(gè)操作绣硝。
不同點(diǎn)：
unbeforeunload（）事件執(zhí)行的順序在onunload()事件之前發(fā)生。(因?yàn)槌糯蹋瑄nbeforeunload()是在頁(yè)面刷新之前觸發(fā)的事 件鹉胖，而onubload()是在頁(yè)面關(guān)閉之后才會(huì)觸發(fā)的)。
unbeforeunload（）事件可以禁止onunload()事件的觸發(fā)够傍。
onunload()事件是無(wú)法阻止頁(yè)面關(guān)閉的甫菠。
瀏覽器的兼容性不同。
vue中監(jiān)聽(tīng)頁(yè)面刷新和離開(kāi)
方法一：直接在mounted或者activated中寫(xiě)
mounted() { //寫(xiě)在mounted或者activated生命周期內(nèi)即可
window.onbeforeunload = e => { //刷新時(shí)彈出提示
return ''
};
},
兼容性更好的寫(xiě)法：
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)聽(tīng)
- 在methods生命周期鉤子中定義事件
methods: {
beforeunloadFn (e) {
// ...
}
}
2.在 mounted 或者 activated 鉤子中注冊(cè)事件
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í)過(guò)程的一個(gè)記錄冕屯，僅供參考寂诱，如有問(wèn)題，歡迎指出安聘！
對(duì)博客文章的參考痰洒，若原文章博主介意瓢棒，請(qǐng)聯(lián)系刪除！請(qǐng)?jiān)?br>
————————————————
版權(quán)聲明：本文為CSDN博主「halo1416」的原創(chuàng)文章丘喻，遵循CC 4.0 BY-SA版權(quán)協(xié)議脯宿，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/halo1416/java/article/details/86705437
