使用onbeforeunload阻止用戶刷新

aaron 發布于2019-08-23 12:32 / 3888人閱讀

摘要：卸載更新講的就是事件，當頁面關閉后會觸發。想在某個頁面中使用這個攔截的大體思路是在進入這個頁面的時候掛載該事件，跳轉頁面的時候將掛載的事件取消。

1、onbeforeunload是什么玩意兒

onbeforeunload是一個事件，當頁面將要被卸載（更新）的時候會被觸發。

卸載（更新）講的就是unload事件，當頁面關閉后,會觸發。

2、語法規則

window.onbeforeunload = funcRef

funcRef指的是一個方法，也就是一個函數引用。

3、怎么使用這個東西 3.1在HTML中,直接掛載到body上




    
    test

3.2在js中，使用window.onbeforeunload綁定方法




    
    test

3.3在單頁面中使用：

一般在項目中直接使用window或者body會導致整個項目的頁面的刷新關閉事件都被攔截。
想在某個頁面中使用這個攔截的大體思路是在進入這個頁面的時候掛載該事件，跳轉頁面的時候將掛載的事件取消。
例如在react中：

componentDidMount() {
    window.onbeforeunload = function()
    {
      return "真的離開?";
    };
  }
componentWillUnmount(){
    window.onbeforeunload = function()
    {
      return null;
    }
  }

以上

云服務器 GPU云服務器用戶刷新 onbeforeunload 查看服務器用戶使用使用ddos防護時用戶可以設定

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

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

監聽瀏覽器刷新及關閉

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

AWang 2019-08-26 13:57 評論0 收藏0
JS魔法堂:定義頁面的Dispose方法——[before]unload事件啟示錄

摘要：坑無視和是十分特殊的事件，要求事件處理函數內部不能阻塞當前線程，而卻恰恰就會阻塞當前線程，因此規范中以明確在和中直接無視這幾個方法的調用。前言 ?最近實施的同事報障，說用戶審批流程后直接關閉瀏覽器，操作十余次后系統就報用戶會話數超過上限，咨詢4A同事后得知登陸后需要顯式調用登出API才能清理4A端，否則必然會超出會話上限。?即使在頁面上增添一個登出按鈕也無法保證用戶不會直接關掉瀏覽器...

Chiclaim 2019-08-19 18:43 評論0 收藏0
DOM 事件詳解

摘要：與此同時，我們獲得了回調函數的句柄，從而可以隨時從元素上移除相應的事件監聽。對象會被作為第一個參數傳遞給事件監聽的回調函數。 Click、touch、load、drag、change、input、error、risize — 這些都是冗長的DOM（文檔對象模型）事件列表的一部分。事件可以在文檔(Document)結構的任何部分被觸發，觸發者可以是用戶操作，也可以是瀏覽器本身。事件并不是...

tianhang 2019-08-19 14:24 評論0 收藏0
JS基礎篇--JS之onunload、onbeforeunload事件詳解

摘要：事件事件在用戶退出頁面時發生。注意事件同樣觸發了頁面載入事件事件。如圖所示大體一句話描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標簽都會觸發事件包括這種。簡介 onunload，onbeforeunload都是在刷新或關閉時調用，可以在腳本中通過 window.onunload來調用。區別在于onbeforeunload在o...

rollback 2019-08-21 17:26 評論0 收藏0