欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉

 更新時間:2016年04月17日 15:23:55   作者:冰輪封雪  
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉標(biāo)簽頁,非常實用,感興趣的童鞋參考下吧

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

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

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

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

你們每次登錄進(jìn)來,為什么要延時10秒,才讓坐席簽入電話系統(tǒng)?。ㄎ覀冏龅氖强头到y(tǒng))?能不能把這個限制去掉啊,用戶體驗太不好了!我們也想去掉啊,但是電話系統(tǒng)頻繁簽入簽出會有問題,用戶刷新了瀏覽器,再次簽入,如果相隔時間很短的話,電話系統(tǒng)會出現(xiàn)故障,為了避免這個問題,我們才加上了這個限制,但是回過頭來思考,就可以進(jìn)入我們今天討論的主題了;

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

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

要做到這點其實也很簡單,使用瀏覽器的本地存儲機(jī)制就可以實現(xiàn),例如cookie,LocalStorage等,這里就不能使用SessionStorage了,因為本次回話結(jié)束后,該緩存就失效了;由于在cookie中存儲會增加cookie的字節(jié)數(shù),每次請求中相應(yīng)的網(wǎng)絡(luò)傳輸量會增加,因此,我們采用了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);
}

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

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

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

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

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)閉的全部內(nèi)容,希望對大家有所幫助!

相關(guān)文章

  • es6 javascript對象Object.values() , Object.entries()示例詳解

    es6 javascript對象Object.values() , Object.entr

    這篇文章主要介紹了es6 javascript對象Object.values() , Object.entries()的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • javascript實現(xiàn)簡約的頁面右下角點擊彈出窗口示例【測試可用】

    javascript實現(xiàn)簡約的頁面右下角點擊彈出窗口示例【測試可用】

    這篇文章主要介紹了javascript實現(xiàn)的頁面右下角點擊彈出窗口功能,結(jié)合實例形式詳細(xì)分析了javascript頁面右下角點擊彈出窗口功能的相關(guān)步驟、原理與注意事項,需要的朋友可以參考下
    2023-07-07
  • javascript 多種搜索引擎集成的頁面實現(xiàn)代碼

    javascript 多種搜索引擎集成的頁面實現(xiàn)代碼

    這個頁面是為了方便自己同時使用多種搜索引擎(呵呵我用其作默認(rèn)主頁),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖
    2010-01-01
  • 通過js將26個英文字母按順序依次排列方式

    通過js將26個英文字母按順序依次排列方式

    這篇文章主要介紹了通過js將26個英文字母按順序依次排列方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 純js實現(xiàn)打字機(jī)效果

    純js實現(xiàn)打字機(jī)效果

    這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)打字機(jī)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 網(wǎng)頁和瀏覽器兼容性問題匯總(draft1)

    網(wǎng)頁和瀏覽器兼容性問題匯總(draft1)

    由于IE擴(kuò)展了許多私有的DOM、CSS等導(dǎo)致許多網(wǎng)頁的開發(fā)者都根據(jù)IE開發(fā),才導(dǎo)致許多網(wǎng)頁的不規(guī)范,從而導(dǎo)致現(xiàn)在的瀏覽器瀏覽相同網(wǎng)頁效果不盡相同。
    2009-06-06
  • 原生javascript實現(xiàn)圖片輪播切換效果

    原生javascript實現(xiàn)圖片輪播切換效果

    這篇文章主要為大家詳細(xì)介紹了原生javascript實現(xiàn)圖片輪播切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則

    JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則

    這篇文章主要介紹了JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則,文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09
  • JS判斷字符串包含的方法

    JS判斷字符串包含的方法

    這篇文章主要介紹了JS判斷字符串包含的方法,可有效的檢測字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常簡單實用,需要的朋友可以參考下
    2015-05-05
  • JavaScript數(shù)學(xué)對象(Math)方法舉例詳解

    JavaScript數(shù)學(xué)對象(Math)方法舉例詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)學(xué)對象(Math)方法的相關(guān)資料,Math(數(shù)學(xué))對象的作用是執(zhí)行普通的算數(shù)任務(wù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-03-03

最新評論