亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

監(jiān)聽(tīng)瀏覽器刷新及關(guān)閉

AWang / 1774人閱讀

摘要：解決思路對(duì)于瀏覽器的關(guān)閉和刷新會(huì)觸發(fā)兩個(gè)事件和，問(wèn)題在于如何區(qū)分用戶是想刷新還是退出此時(shí)應(yīng)該將用戶催眠，然后獲得用戶的思想，預(yù)判用戶走位及操作。。。事件是無(wú)法阻止頁(yè)面關(guān)閉的。

需求背景： 為保證‘高度安全性’，用戶每次退出頁(yè)面或?yàn)g覽器都要清除登陸信息，每次進(jìn)入系統(tǒng)都要重新登陸（每次登陸還要手機(jī)驗(yàn)證碼等亂七八糟的驗(yàn)證信息，，，求用戶的心里陰影面積），但是刷新頁(yè)面不可以清除登陸信息。
解決思路： javascript 對(duì)于瀏覽器的關(guān)閉和刷新會(huì)觸發(fā)兩個(gè)事件 onbeforeunload()和onunload()，問(wèn)題在于如何區(qū)分用戶是想刷新還是退出（此時(shí)應(yīng)該將用戶催眠，然后獲得用戶的思想，預(yù)判用戶走位及操作。。。），本文主要記錄這兩個(gè)方法的區(qū)別，設(shè)備兼容性及如何催眠用戶（開(kāi)玩笑的），是如何區(qū)分刷新和退出瀏覽器
onbeforeunload()和onunload() 
onbeforeunload 和 onunload 都是在頁(yè)面刷新或退出時(shí)觸發(fā)的事件

用法：

事件 用法
onunload window.onunload=function(){SomeJavaScriptCode};
onbeforeunload window.onbeforeunload=function(){SomeJavaScriptCode};

區(qū)別：

unbeforeunload()是在頁(yè)面刷新或關(guān)閉之前觸發(fā)的事件，而onubload()是在頁(yè)面刷新或關(guān)閉之后才會(huì)觸發(fā)的。

unbeforeunload()事件執(zhí)行的順序在onunload()事件之前發(fā)生。

unbeforeunload()事件可以禁止onunload()事件的觸發(fā)。

onunload()事件是無(wú)法阻止頁(yè)面關(guān)閉的。

兼容性（pc）：

事件 Chrome Firefox IE Opera Safari
onunload yes yes yes yes yes
onbeforeunload 1 1 4 12 3

注意：onbeforeunoad 在移動(dòng)端基本都不兼容，onunload則兼容大部分主流移動(dòng)端瀏覽器

參考文獻(xiàn)：
MDN: window.onbeforeunload
MDN: window.onunload
區(qū)分刷新和退出 
在瀏覽器關(guān)閉前是無(wú)法判斷用戶是刷新還是退出，所以我們?cè)谟脩粼俅未蜷_(kāi)的時(shí)候來(lái)判斷用戶是否刷新


解決思路：



用戶關(guān)閉瀏覽器時(shí)，記錄當(dāng)前時(shí)間，并存于瀏覽器緩存中


用戶再次打開(kāi)頁(yè)面時(shí)，獲取上次退出的時(shí)間，并于當(dāng)前時(shí)間進(jìn)行比較，若小于5s則表示用戶執(zhí)行的是刷新操作，若大于5s則判定為退出



注意： 5s并非固定，要根據(jù)實(shí)際情況調(diào)整

上代碼：

// 進(jìn)入頁(yè)面執(zhí)行
// 記錄當(dāng)前時(shí)間并轉(zhuǎn)成時(shí)間戳
const now = new Date().getTime();
// 從緩存中獲取用戶上次退出的時(shí)間戳
const leaveTime = parseInt(localStorage.getItem("leaveTime"), 10);
// 判斷是否為刷新，兩次間隔在5s內(nèi)判定為刷新操作
const refresh = (now - leaveTime) <= 5000;
// 測(cè)試alert
alert(refresh ? "刷新" : "重新登陸");

// 退出當(dāng)前頁(yè)面執(zhí)行
window.onunload = function(e){ // ios 不支持 window.onbeforeunload()
  // 將退出時(shí)間存于localstorage中
  localStorage.setItem("leaveTime", new Date().getTime());
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109876.html

相關(guān)文章

  • Day15 - LocalStorage

    摘要：完整中文版指南及視頻教程在從零到壹全棧部落。當(dāng)頁(yè)面重新刷新或者關(guān)閉之前，執(zhí)行清除頁(yè)面的緩存。慎用，尤其在生產(chǎn)環(huán)境中。 Day15 - LocalStorage (Node+Vue+微信公眾號(hào)開(kāi)發(fā))企業(yè)級(jí)產(chǎn)品全棧開(kāi)發(fā)速成周末班首期班(10.28號(hào)正式開(kāi)班，歡迎搶座) 作者：?黎躍春-追時(shí)間的人 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 ...

    用戶84 評(píng)論0 收藏0

  • React組件卸載、路由跳轉(zhuǎn)、頁(yè)面關(guān)閉（刷新）之前進(jìn)行提示

    摘要：組件卸載生命周期路由跳轉(zhuǎn)和頁(yè)面關(guān)閉三者看起來(lái)有些類似的地方，比如都是當(dāng)前組件即將從視口消失，但實(shí)際上所觸發(fā)的事件均不相同。至此已經(jīng)實(shí)現(xiàn)了路由跳轉(zhuǎn)時(shí)提醒用戶進(jìn)行保存的功能。 React組件卸載生命周期、路由跳轉(zhuǎn)和頁(yè)面關(guān)閉三者看起來(lái)有些類似的地方，比如都是當(dāng)前組件即將從視口消失，但實(shí)際上所觸發(fā)的事件均不相同。以一個(gè)實(shí)際案例出發(fā)： 某單頁(yè)應(yīng)用的文章編輯頁(yè)用戶正在編輯文章，此時(shí)尚未保存。當(dāng)用戶...

    leanote 評(píng)論0 收藏0

  • 原生js滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新 Scrollload

    摘要：原文地址初衷如今移動(dòng)端站點(diǎn)越來(lái)越多，滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見(jiàn)，即使現(xiàn)在很多站點(diǎn)也會(huì)有這樣的需求，比如百度首頁(yè)就有。 原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷 如今移動(dòng)端站點(diǎn)越來(lái)越多，滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見(jiàn)，即使現(xiàn)在很多pc站點(diǎn)也會(huì)有這樣的需求，比如百度首頁(yè)...

    HollisChuang 評(píng)論0 收藏0

  • sendBeacon 刷新/關(guān)閉頁(yè)面之前發(fā)送請(qǐng)求

    摘要：背景有一個(gè)任務(wù)非常耗時(shí)會(huì)消耗后臺(tái)大量算力，所以在退出頁(yè)面的時(shí)候，要求前端這邊發(fā)送一個(gè)請(qǐng)求來(lái)殺死任務(wù)。小結(jié)本文總共講了三個(gè)，和，這個(gè)估計(jì)知道的人比較少，以后遇到前端埋點(diǎn)和頁(yè)面卸載前發(fā)送請(qǐng)求的需求，記得使用這三個(gè)。 背景： 有一個(gè)任務(wù)非常耗時(shí)會(huì)消耗后臺(tái)大量算力，所以在退出頁(yè)面的時(shí)候，要求前端這邊發(fā)送一個(gè)請(qǐng)求來(lái)殺死任務(wù)。 一開(kāi)始以為這個(gè)需求非常簡(jiǎn)單，就是在進(jìn)入其他路由前，發(fā)送一下請(qǐng)求，殺死一...

    gxyz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<