js監聽瀏覽器離開頁面操做

時間 2019-12-19

原文原文鏈接

序言

　　你們是否常常遇到在關閉網頁的時候，會看到一個肯定是否離開當前頁面的提示框？想一些在線測試系統、信息錄入系統等就常常會有這一些提示，避免用戶有意或者無心中關掉了頁面，致使數據丟失。這裏面的實現過程很簡單，利用了HTML DOM事件中的onunload和onbeforeunload方法。html

unload 事件屬性

　　定義：當用戶卸載文檔時執行一段 JavaScript，例如：瀏覽器

// body
<body onunload="goodbye()">

//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("肯定離開當前頁面嗎？");
}

　　用法：當用戶離開頁面時，會發生 unload 事件。注意：若是您重載頁面，也會觸發 unload 事件（以及 onload 事件）。　服務器

　　觸發於：dom

關閉瀏覽器窗口
經過地址欄或收藏夾前往其餘頁面的時候
點擊返回，前進，刷新，主頁其中一個的時候
點擊一個前往其餘頁面的url鏈接的時候
調用如下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
當用window open打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。
從新賦予location.href的值的時候。
經過input type="submit"按鈕提交一個具備指定action的表單的時候。

onbeforeunload 事件屬性

　　定義：在即將離開當前頁面(刷新或關閉)時執行 JavaScript，例如：測試

//body
<body onbeforeunload="goodbye()">

//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("肯定離開當前頁面嗎？");
}

　　用法：onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面仍是離開當前頁面。對話框默認的提示信息根據不一樣的瀏覽器有所不一樣，標準的信息相似 "肯定要離開此頁嗎？"。該信息不能刪除。但你能夠自定義一些消息提示與標準信息一塊兒顯示在對話框。注意：在 Firefox 瀏覽器中，只顯示默認提醒信息（不顯示自定義信息）。url

　　觸發於： spa

關閉瀏覽器窗口
經過地址欄或收藏夾前往其餘頁面的時候
點擊返回，前進，刷新，主頁其中一個的時候
點擊一個前往其餘頁面的url鏈接的時候
調用如下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
當用window open打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。
從新賦予location.href的值的時候。
經過input type=」submit」按鈕提交一個具備指定action的表單的時候。

瀏覽器支持程度

　　目前主流瀏覽器都支持這兩個事件屬性3d

概述

　　onunload，onbeforeunload都是在刷新或關閉時調用，能夠在<script>腳本中經過window.onunload來指定或者在<body>裏指定。區別在於onbeforeunload在onunload以前執行，它還能夠阻止onunload的執行。 onbeforeunload也是在頁面刷新或關閉時調用，onbeforeunload是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從服務器上讀到了須要加載的新的頁面，在即將替換掉當前頁面時調用。onunload是沒法阻止頁面的更新和關閉的，而 onbeforeunload 能夠作到。code

　　附：orm

　　　　頁面加載時只執行onload
　　　　頁面關閉時先執行onbeforeunload，最後onunload
　　　　頁面刷新時先執行onbeforeunload，而後onunload，最後onload

附上部分效果圖：

綁定body標籤的代碼：

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>測試</title>
        <script>
        　　function checkLeave(){
        　　　　event.returnValue="肯定離開當前頁面嗎？";
        　　}
    　　</script>
    </head>
    <body onbeforeunload="checkLeave()">
        測試
    </body>
</html>

谷歌瀏覽器下的效果：

點擊刷新按鈕：

點擊返回按鈕：

經過任務欄或者收藏夾前往其餘界面：

關閉頁面：

edge下的效果：

點擊刷新按鈕：

點擊返回按鈕：

關閉頁面：

注：在新版的火狐瀏覽器（我是用的版本: 57.0 ）裏面，上面這種寫法不生效？！

綁定window對象的代碼：

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>測試</title>
        <script>
        　　window.onbeforeunload=function(e){     
            　　var e = window.event||e;  
            　　e.returnValue=("肯定離開當前頁面嗎？");
            } 
    　　</script>
    </head>
    <body>
        測試
    </body>
</html>