Web開發(fā)者在系統(tǒng)開發(fā)中經(jīng)常要面對(duì)產(chǎn)品經(jīng)理各式各樣的需求，當(dāng)然，大部分對(duì)產(chǎn)品體驗(yàn)還是有幫助的，例如我們今天提到的刷新頁面，前進(jìn)后退，關(guān)閉瀏覽器標(biāo)簽時(shí)，為了避免用戶誤操作，需給出二次確認(rèn)提示框，這個(gè)相信大家都非常熟悉了，采用瀏覽器提供的BOM事件機(jī)制就可以解決，使用window對(duì)象的onbeforeunload事件即可，如果產(chǎn)品經(jīng)理只提出這樣的需求，那確實(shí)無可厚非，然而其需要的不僅僅是這些...

例如，我們一次項(xiàng)目開發(fā)中，產(chǎn)品經(jīng)理就針對(duì)我們的實(shí)現(xiàn)提出了“改進(jìn)方案”：

你們這彈出框太丑了，跟系統(tǒng)整體風(fēng)格不搭調(diào)啊，不能使用咱們自己組件庫(kù)中的Dialog嗎？很好的問題...我只想說，you can you up...

你們這刷新和關(guān)閉標(biāo)簽頁中展示的文案一樣啊，需要區(qū)分對(duì)待下，刷新提示XXX，關(guān)閉時(shí)提示SSS，這樣用戶才能更明確。恩，考慮到了用戶的體驗(yàn)，很好，我還是想說，you can you up...其實(shí)，瀏覽器在關(guān)閉和刷新時(shí)，本身已經(jīng)區(qū)別對(duì)待了，提示是不同的，只不過我們自定義的部分并不能顯示不同的文案而已；當(dāng)然，也有一些hack的方法，但是很難適應(yīng)多個(gè)瀏覽器，各瀏覽器內(nèi)部對(duì)于關(guān)閉標(biāo)簽頁和刷新的實(shí)現(xiàn)機(jī)制會(huì)有所不同；

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

區(qū)分刷新與關(guān)閉標(biāo)簽頁

我們無法根據(jù)瀏覽器事件區(qū)分刷新還是關(guān)閉標(biāo)簽頁，進(jìn)而在相應(yīng)動(dòng)作觸發(fā)前，執(zhí)行不同的動(dòng)作，但是對(duì)于上文中產(chǎn)品提出的第三點(diǎn)意見，其實(shí)還是可以考慮優(yōu)化一下的，就是只有在刷新的時(shí)候延時(shí)10秒，新登錄或關(guān)閉標(biāo)簽頁一段時(shí)間之后再進(jìn)來時(shí)不延時(shí)；

要做到這點(diǎn)其實(shí)也很簡(jiǎn)單，使用瀏覽器的本地存儲(chǔ)機(jī)制就可以實(shí)現(xiàn)，例如cookie，LocalStorage等，這里就不能使用SessionStorage了，因?yàn)楸敬位卦捊Y(jié)束后，該緩存就失效了；由于在cookie中存儲(chǔ)會(huì)增加cookie的字節(jié)數(shù)，每次請(qǐng)求中相應(yīng)的網(wǎng)絡(luò)傳輸量會(huì)增加，因此，我們采用了LocalStorage；其操作很簡(jiǎn)單，我們使用的前端框架是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);
}

上面代碼主要作用是，進(jìn)入系統(tǒng)后，會(huì)先去LocalStorage中獲取上次退出時(shí)的時(shí)間，再獲取當(dāng)前時(shí)間，兩個(gè)時(shí)間進(jìn)行減法，如果值小于10秒，我們就認(rèn)為這是刷新，如果值大于10秒，我們認(rèn)為是關(guān)閉標(biāo)簽頁或新登錄，進(jìn)而可以執(zhí)行不同的方法，讓客服有更好的體驗(yàn)，不用每次進(jìn)入系統(tǒng)都要等待10秒才能簽入電話系統(tǒng)了，產(chǎn)品經(jīng)理還是很重要的，吼吼，要不是他的疑問，可能我們也不會(huì)來優(yōu)化這個(gè)地方了...當(dāng)然，其實(shí)RD也要逐漸培養(yǎng)這種用戶體驗(yàn)至上的思維，哪怕有一點(diǎn)可提升客服效率的地方，都值得我們花時(shí)間來優(yōu)化；

下面把相關(guān)退出的代碼也貼一下吧，前面忘說了，不管是刷新，還是關(guān)閉標(biāo)簽頁，只要是頁面銷毀，我們都會(huì)去執(zhí)行登出電話系統(tǒng)的操作，所以每次進(jìn)來后需要重新簽入；

//刷新頁面或者關(guān)閉頁面
$window.onbeforeunload = () => {
return '操作將會(huì)導(dǎo)致頁面數(shù)據(jù)清空，請(qǐng)謹(jǐn)慎操作...';
};
//每次頁面unload時(shí)，設(shè)置LocalStorage時(shí)間；
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

我們可能還注意到一些問題，那就是刷新，關(guān)閉頁面，前進(jìn)后退，你需要跳出瀏覽器默認(rèn)二次確認(rèn)框，但是用戶點(diǎn)擊退出系統(tǒng)按鈕，則必須彈出自己組件庫(kù)中的Dialog了，還必須不能兩個(gè)都彈出，具體代碼如下：

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

以上所述是小編給大家介紹的JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉的全部?jī)?nèi)容，希望對(duì)大家有所幫助！

最新評(píng)論