国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

監聽瀏覽器刷新及關閉

AWang / 1661人閱讀

摘要：解決思路對于瀏覽器的關閉和刷新會觸發兩個事件和，問題在于如何區分用戶是想刷新還是退出此時應該將用戶催眠，然后獲得用戶的思想，預判用戶走位及操作。。。事件是無法阻止頁面關閉的。

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

用法：

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

區別：

unbeforeunload()是在頁面刷新或關閉之前觸發的事件，而onubload()是在頁面刷新或關閉之后才會觸發的。

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

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

onunload()事件是無法阻止頁面關閉的。

兼容性（pc）：

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

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

參考文獻：
MDN: window.onbeforeunload
MDN: window.onunload
區分刷新和退出 
在瀏覽器關閉前是無法判斷用戶是刷新還是退出，所以我們在用戶再次打開的時候來判斷用戶是否刷新


解決思路：



用戶關閉瀏覽器時，記錄當前時間，并存于瀏覽器緩存中


用戶再次打開頁面時，獲取上次退出的時間，并于當前時間進行比較，若小于5s則表示用戶執行的是刷新操作，若大于5s則判定為退出



注意： 5s并非固定，要根據實際情況調整

上代碼：

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109876.html

相關文章

  • Day15 - LocalStorage

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

    用戶84 評論0 收藏0

  • React組件卸載、路由跳轉、頁面關閉（刷新）之前進行提示

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

    leanote 評論0 收藏0

  • 原生js滾動到底部加載數據和下拉刷新 Scrollload

    摘要：原文地址初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多站點也會有這樣的需求，比如百度首頁就有。 原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷 如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多pc站點也會有這樣的需求，比如百度首頁...

    HollisChuang 評論0 收藏0

  • sendBeacon 刷新/關閉頁面之前發送請求

    摘要：背景有一個任務非常耗時會消耗后臺大量算力，所以在退出頁面的時候，要求前端這邊發送一個請求來殺死任務。小結本文總共講了三個，和，這個估計知道的人比較少，以后遇到前端埋點和頁面卸載前發送請求的需求，記得使用這三個。 背景： 有一個任務非常耗時會消耗后臺大量算力，所以在退出頁面的時候，要求前端這邊發送一個請求來殺死任務。 一開始以為這個需求非常簡單，就是在進入其他路由前，發送一下請求，殺死一...

    gxyz 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<