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

時間 2019-11-07

標籤基礎 onunload onbeforeunload 事件詳解欄目 JavaScript 简体版

原文原文鏈接

簡介

onunload，onbeforeunload都是在刷新或關閉時調用，能夠在<script>腳本中經過 window.onunload來調用。區別在於onbeforeunload在onunload以前執行，它還可以阻止onunload的執行。javascript

onbeforeunload 是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從服務器上讀到了須要加載的新的頁面，在即將替換掉當前頁面時調用。html

onunload事件

onunload 事件在用戶退出頁面時發生。java

onunload 發生於當用戶離開頁面時發生的事件(經過點擊一個鏈接，提交表單，關閉瀏覽器窗口等等。)瀏覽器

注意： onunload 事件一樣觸發了頁面載入事件(+ onload 事件)。服務器

語法

直接使用在html中：spa

<body onload="SomeJavaScriptCode">

注：如下 HTML 標籤支持 onunload :<body>, <frameset>firefox

JavaScript 中:code

window.onunload=function(){SomeJavaScriptCode};

例子：htm

//JS document
window.onunload = function(){
alert("unload is work");
}

瀏覽器兼容狀況

IE瀏覽器頁面跳轉、刷新頁面能執行，但關閉瀏覽器不能執行；對象
firefox 頁面跳轉能執行，但刷新頁面、關閉瀏覽器不能執行；
Safari 刷新頁面、頁面跳轉，關閉瀏覽器都會執行；
Opera、Chrome任何狀況都不執行。

如圖所示：

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

onbeforeunload事件

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

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

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

但你能夠自定義一些消息提示與標準信息一塊兒顯示在對話框。

注意：若是你沒有在 <body> 元素上指定 onbeforeunload 事件，則須要在 window 對象上添加事件，並使用 returnValue 屬性建立自定義信息(查看如下語法實例)。

語法

html中使用：

<element onbeforeunload="myScript">

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

凡是 <a> 標籤都會觸發 onbeforeunload事件包括 href=」javascript:void(0)」這種。

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

解決方法：給這 a標籤的父級添加 onclick=function(){return false} 便可，不過添加了這個以後要確保父級裏面沒有 input type=」checkbox」的標籤，不然會致使其無效不可點擊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。