監聽瀏覽器關閉事件，實現在刷新時或者瀏覽器關閉前我們可以寫一些業務邏輯
需求1：H5遊戲，在用戶切換了標籤頁，（遊戲界面處於非當前頁面）暫停遊戲
需求2：在線教學視頻，在用戶切換了標籤頁或者關閉瀏覽器後，暫停視頻播放，並及時記錄觀看時間，發送到後臺程序
實現：
主要是利用兩個API: document.onvisibilitychange 和 window.onbeforeunload
visibilitychange事件是瀏覽器新添加的一個事件，當瀏覽器的某個標籤頁切換到後臺，或從後臺切換到前臺時就會觸發該消息，現在主流的瀏覽器都支持該消息了，例如Chrome, Firefox, IE10等。在google瀏覽器中測試，關閉瀏覽器也可以觸發這個事件
visibilitychange兼容性：（僅參考）
onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。
該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面。
對話框默認的提示信息根據不同的瀏覽器有所不同，標準的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。
所以這事件中我們不需要寫返回值，寫了返回值後會彈出我們控制不了的提示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
document.onvisibilitychange = function () {
if (document.visibilityState === 'hidden') {
localStorage.setItem("onvisibilitychange", Math.random())
}
}
window.onbeforeunload = function () {
$.post("/home/index", function (data) {
});
localStorage.setItem("onbeforeunload", Math.random())
}
</script>
</body>
</html>
vue中要寫到mounted裏面
mounted() {
let _this = this;
if (typeof document.addEventListener === "undefined") {
console.error("瀏覽器不支持addEventListener,請升級");
} else {
document.addEventListener("visibilitychange", () => {
if (document.visibilityState == "hidden") {
_this.sendCurVideoTime(localStorage.getItem("webviewDuration"));
}
});
window.addEventListener("beforeunload", () => {
this.sendCurVideoTime(localStorage.getItem("webviewDuration"));
});
}
},
另外發現vue中函數：beforeDestroy 可以監測到瀏覽器關閉事件，但不能監測刷新事件