當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

JS之onunload、onbeforeunload事件详解

發(fā)布時(shí)間：2024/8/26 综合教程 41 生活家

生活随笔收集整理的這篇文章主要介紹了 JS之onunload、onbeforeunload事件详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

簡(jiǎn)介

onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在<script>腳本中通過(guò) window.onunload來(lái)調(diào)用。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。

onbeforeunload 是正要去服務(wù)器讀取新的頁(yè)面時(shí)調(diào)用，此時(shí)還沒(méi)開始讀取；而onunload則已經(jīng)從服務(wù)器上讀到了需要加載的新的頁(yè)面，在即將替換掉當(dāng)前頁(yè)面時(shí)調(diào)用。

onunload事件

onunload 事件在用戶退出頁(yè)面時(shí)發(fā)生。

onunload 發(fā)生于當(dāng)用戶離開頁(yè)面時(shí)發(fā)生的事件(通過(guò)點(diǎn)擊一個(gè)連接，提交表單，關(guān)閉瀏覽器窗口等等。)

注意： onunload 事件同樣觸發(fā)了頁(yè)面載入事件(+ onload 事件)。

語(yǔ)法

直接使用在html中：

<body onload="SomeJavaScriptCode">

注：以下 HTML 標(biāo)簽支持 onunload :<body>, <frameset>

JavaScript 中:

window.onunload=function(){SomeJavaScriptCode};

例子：

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

瀏覽器兼容情況

IE瀏覽器 頁(yè)面跳轉(zhuǎn)、刷新頁(yè)面能執(zhí)行，但關(guān)閉瀏覽器不能執(zhí)行；
firefox 頁(yè)面跳轉(zhuǎn)能執(zhí)行，但刷新頁(yè)面、關(guān)閉瀏覽器不能執(zhí)行；
Safari 刷新頁(yè)面、頁(yè)面跳轉(zhuǎn)，關(guān)閉瀏覽器都會(huì)執(zhí)行；
Opera、Chrome任何情況都不執(zhí)行。

如圖所示：

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

onbeforeunload事件

onbeforeunload 事件在即將離開當(dāng)前頁(yè)面（刷新或關(guān)閉）時(shí)觸發(fā)。

該事件可用于彈出對(duì)話框，提示用戶是繼續(xù)瀏覽頁(yè)面還是離開當(dāng)前頁(yè)面。

對(duì)話框默認(rèn)的提示信息根據(jù)不同的瀏覽器有所不同，標(biāo)準(zhǔn)的信息類似 "確定要離開此頁(yè)嗎？"。該信息不能刪除。

但你可以自定義一些消息提示與標(biāo)準(zhǔn)信息一起顯示在對(duì)話框。

注意：如果你沒(méi)有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 對(duì)象上添加事件，并使用 returnValue 屬性創(chuàng)建自定義信息(查看以下語(yǔ)法實(shí)例)。

語(yǔ)法

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 = "我在這寫點(diǎn)東西...";
};

值得注意的是，網(wǎng)上流傳說(shuō) 可以通過(guò)檢查 e.clientX e.clientY 判斷用戶是否點(diǎn)擊右上角關(guān)閉瀏覽器的，但是實(shí)踐發(fā)現(xiàn) 只有 IE6，IE7，IE8 能獲取得到具體數(shù)值，其他瀏覽器均為 undefined。

瀏覽器兼容情況

IE、Safari 完美支持
Firefox、Chrome 不支持文字提醒信息
Opera 不支持

如圖所示：

IE6,IE7 使用 onbeforeunload 遇到的bug

凡是 <a> 標(biāo)簽都會(huì)觸發(fā) onbeforeunload事件包括 href=”javascript:void(0)” 這種。

在IE6，IE7 下面點(diǎn)擊里面的 a 標(biāo)簽，蛋疼的事情就發(fā)生了。

解決方法：給這 a標(biāo)簽的父級(jí) 添加 onclick=function(){return false} 即可，不過(guò)添加了這個(gè)之后要確保父級(jí)里面沒(méi)有 input type=”checkbox” 的標(biāo)簽，否則會(huì)導(dǎo)致其無(wú)效不可點(diǎn)擊。

總結(jié)

以上是生活随笔為你收集整理的JS之onunload、onbeforeunload事件详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。