JS區分瀏覽器頁面是刷新還是關閉_javascript技巧

Web開發者在系統開發中經常要面對產品經理各式各樣的需求，當然，大部分對產品體驗還是有幫助的，例如我們今天提到的刷新頁面，前進後退，關閉瀏覽器標籤時，為了避免使用者誤操作，需給予二次確認提示框，這個相信大家都非常熟悉了，採用瀏覽器提供的BOM事件機制就可以解決，使用window對象的onbeforeunload事件即可，如果產品經理只提出這樣的需求，那確實無可厚非，然而其需要的不僅僅是這些...

例如，在我們一次專案開發中，產品經理就針對我們的實作提出了「改進方案」：

你們這彈出框太醜了，跟系統整體風格不搭調啊，不能使用咱們自己組件庫中的Dialog嗎？很好的問題...我只想說，you can you up...

你們這刷新和關閉標籤頁中展示的文案一樣啊，需要區分對待下，刷新提示XXX，關閉時提示SSS，這樣用戶才能更明確。恩，考慮到了用戶的體驗，很好，我還是想說，you can you up...其實，瀏覽器在關閉和刷新時，本身已經區別對待了，提示是不同的，只不過我們自定義的部分並不能顯示不同的文案而已；當然，也有一些hack的方法，但是很難適應多個瀏覽器，各瀏覽器內部對於關閉標籤頁和刷新的實現機制會有所不同；

你們每次登入進來，為什麼要延時10秒，才讓坐席簽入電話系統啊（我們做的是客服系統）？能不能把這個限制去掉啊，使用者體驗太不好了！我們也想去掉啊，但是電話系統頻繁簽入簽出會有問題，用戶刷新了瀏覽器，再次簽入，如果相隔時間很短的話，電話系統會出現故障，為了避免這個問題，我們才加上了這個限制，但是回過頭來思考，就可以進入我們今天討論的主題了；

區分刷新與關閉標籤頁

我們無法根據瀏覽器事件區分刷新還是關閉標籤頁，進而在相應動作觸發前，執行不同的動作，但是對於上文中產品提出的第三點意見，其實還是可以考慮優化一下的，就是只有刷新的時候延時10秒，新登入或關閉標籤頁一段時間之後再進來時不時；

要做到這點其實也很簡單，使用瀏覽器的本地儲存機制就可以實現，例如cookie，LocalStorage等，這裡就不能使用SessionStorage了，因為本次回話結束後，該快取就失效了；由於在cookie中儲存會增加cookie的位元組數，每次請求中相應的網路傳輸量會增加，因此，我們採用了LocalStorage；其操作很簡單，我們使用的前端框架是AngularJS，具體如下：

const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}

上面程式碼主要作用是，進入系統後，會先去LocalStorage中取得上次退出時的時間，再取得當前時間，兩個時間進行減法，如果值小於10秒，我們就認為這是刷新，如果值大於10秒，我們認為是關閉標籤頁或新登錄，進而可以執行不同的方法，讓客服有更好的體驗，不用每次進入系統都要等待10秒才能簽入電話系統了，產品經理還是很重要的，吼吼，要不是他的疑問，可能我們也不會來優化這個地方了...當然，其實RD也要逐漸培養這種用戶體驗至上的思維，哪怕有一點可提升客服效率的地方，都值得我們花時間優化；

下面把相關退出的程式碼也貼一下吧，前面忘說了，不管是刷新，還是關閉標籤頁，只要是頁面銷毀，我們都會去執行登出電話系統的操作，所以每次進來後需要重新簽入；

//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空，请谨慎操作...';
};
//每次页面unload时，设置LocalStorage时间；
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

我們可能還注意到一些問題，那就是刷新，關閉頁面，前進後退，你需要跳出瀏覽器默認二次確認框，但是用戶點擊退出系統按鈕，則必須彈出自己組件庫中的Dialog了，還必須不能兩個都彈出，具體程式碼如下：

onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗？'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作，大家不用管
...
}
}

以上所述是小編給大家介紹的JS區分瀏覽器頁面是刷新還是關閉的全部內容，希望對大家有幫助！