JS基礎篇--JS之onunload、onbeforeunload事件詳解

rollback 發布于2019-08-21 17:26 / 1923人閱讀

摘要：事件事件在用戶退出頁面時發生。注意事件同樣觸發了頁面載入事件事件。如圖所示大體一句話描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標簽都會觸發事件包括這種。

簡介

onunload，onbeforeunload都是在刷新或關閉時調用，可以在

大體一句話描述：IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持該事件。

onbeforeunload事件

onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。

該事件可用于彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面。

對話框默認的提示信息根據不同的瀏覽器有所不同，標準的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。

但你可以自定義一些消息提示與標準信息一起顯示在對話框。

注意：如果你沒有在元素上指定 onbeforeunload 事件，則需要在 window 對象上添加事件，并使用 returnValue 屬性創建自定義信息(查看以下語法實例)。

語法

html中使用：

JavaScript 中：

object.onbeforeunload=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("beforeunload", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

JS中使用例子寫法一：

//JS document
window.onbeforeunload = function(){
return "onbeforeunload is work";
}

return 的值為你需要告訴用戶的提示信息如上面demo的話瀏覽器的提示是這樣(firefox ，Chrome并不支持文字提醒)。

JS中使用例子寫法二：

window.onbeforeunload = function(event) {
    event.returnValue = "我在這寫點東西...";
};

值得注意的是，網上流傳說可以通過檢查 e.clientX e.clientY 判斷用戶是否點擊右上角關閉瀏覽器的，但是實踐發現只有 IE6，IE7，IE8 能獲取得到具體數值，其他瀏覽器均為 undefined。

瀏覽器兼容情況

IE、Safari 完美支持

Firefox、Chrome 不支持文字提醒信息

Opera 不支持

如圖所示：

IE6,IE7 使用 onbeforeunload 遇到的bug

凡是標簽都會觸發 onbeforeunload事件包括 href=”javascript:void(0)” 這種。

在IE6，IE7 下面點擊里面的 a 標簽，蛋疼的事情就發生了。

解決方法：給這 a標簽的父級添加 onclick=function(){return false} 即可，不過添加了這個之后要確保父級里面沒有 input type=”checkbox” 的標簽，否則會導致其無效不可點擊。

云服務器 GPU云服務器之基礎篇 js事件詳解 js綁定事件基礎基礎篇

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

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

監聽瀏覽器刷新及關閉

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

AWang 2019-08-26 13:57 評論0 收藏0
Dom中高big 事件總結（持續更新中）

摘要：三事件事件在即將離開當前頁面刷新或關閉時觸發。四事件事件在用戶退出頁面時發生。五事件該事件在存儲更新時觸發六事件該事件在窗口的瀏覽歷史對象發生改變時觸發七事件事件在用戶中止加載或元素時觸發。將前段時間自己用到的，比較少見，但是功能很強大的事件在這里總結下，一來自己重新梳理歸檔下，二來，沒用過的同學也可以嘗試用下。其實，這些都是基礎知識，但是基礎是最重要的。還記得老師說過：基礎不牢，地...

mzlogin 2019-08-23 14:40 評論0 收藏0
JS魔法堂:定義頁面的Dispose方法——[before]unload事件啟示錄

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

Chiclaim 2019-08-19 18:43 評論0 收藏0
頁面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時，事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發，我們可以在這個階段使用去訪問元素。頁面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

lx1036 2019-08-01 17:44 評論0 收藏0
頁面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時，事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發，我們可以在這個階段使用去訪問元素。頁面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

luckyyulin 2019-08-21 16:55 評論0 收藏0