快捷導(dǎo)航

js實(shí)現(xiàn)關(guān)閉網(wǎng)頁(yè)出現(xiàn)是否離開(kāi)提示

更新時(shí)間：2017年12月07日 14:51:59 作者：cnblogs

本篇文章主要給大家?guī)?lái)一個(gè)JS實(shí)用功能，監(jiān)聽(tīng)瀏覽器在關(guān)閉的時(shí)候提示出是否要離開(kāi)的小功能，需要的朋友學(xué)習(xí)下吧。

大家是否經(jīng)常遇到在關(guān)閉網(wǎng)頁(yè)的時(shí)候，會(huì)看到一個(gè)確定是否離開(kāi)當(dāng)前頁(yè)面的提示框？想一些在線(xiàn)測(cè)試系統(tǒng)、信息錄入系統(tǒng)等就經(jīng)常會(huì)有這一些提示，避免用戶(hù)有意或者無(wú)意中關(guān)掉了頁(yè)面，導(dǎo)致數(shù)據(jù)丟失。這里面的實(shí)現(xiàn)過(guò)程很簡(jiǎn)單，利用了HTML DOM事件中的onunload和onbeforeunload方法。

unload 事件屬性

定義：當(dāng)用戶(hù)卸載文檔時(shí)執(zhí)行一段 JavaScript，例如：

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

//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("確定離開(kāi)當(dāng)前頁(yè)面嗎？");
}

用法：當(dāng)用戶(hù)離開(kāi)頁(yè)面時(shí)，會(huì)發(fā)生 unload 事件。注意：如果您重載頁(yè)面，也會(huì)觸發(fā) unload 事件（以及 onload 事件）?！?/p>

觸發(fā)于：

關(guān)閉瀏覽器窗口通過(guò)地址欄或收藏夾前往其他頁(yè)面的時(shí)候點(diǎn)擊返回，前進(jìn)，刷新，主頁(yè)其中一個(gè)的時(shí)候點(diǎn)擊一個(gè)前往其他頁(yè)面的url連接的時(shí)候調(diào)用以下任意一個(gè)事件的時(shí)候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. 當(dāng)用window open打開(kāi)一個(gè)頁(yè)面，并把本頁(yè)的window的名字傳給要打開(kāi)的頁(yè)面的時(shí)候。重新賦予location.href的值的時(shí)候。通過(guò)input type="submit"按鈕提交一個(gè)具有指定action的表單的時(shí)候。 onbeforeunload 事件屬性

定義：在即將離開(kāi)當(dāng)前頁(yè)面(刷新或關(guān)閉)時(shí)執(zhí)行 JavaScript，例如：

//body
<body onbeforeunload="goodbye()">
//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("確定離開(kāi)當(dāng)前頁(yè)面嗎？");
}

用法：onbeforeunload 事件在即將離開(kāi)當(dāng)前頁(yè)面（刷新或關(guān)閉）時(shí)觸發(fā)。該事件可用于彈出對(duì)話(huà)框，提示用戶(hù)是繼續(xù)瀏覽頁(yè)面還是離開(kāi)當(dāng)前頁(yè)面。對(duì)話(huà)框默認(rèn)的提示信息根據(jù)不同的瀏覽器有所不同，標(biāo)準(zhǔn)的信息類(lèi)似 "確定要離開(kāi)此頁(yè)嗎？"。該信息不能刪除。但你可以自定義一些消息提示與標(biāo)準(zhǔn)信息一起顯示在對(duì)話(huà)框。注意：在 Firefox 瀏覽器中，只顯示默認(rèn)提醒信息（不顯示自定義信息）。

觸發(fā)于：

關(guān)閉瀏覽器窗口通過(guò)地址欄或收藏夾前往其他頁(yè)面的時(shí)候點(diǎn)擊返回，前進(jìn)，刷新，主頁(yè)其中一個(gè)的時(shí)候點(diǎn)擊一個(gè)前往其他頁(yè)面的url連接的時(shí)候調(diào)用以下任意一個(gè)事件的時(shí)候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. 當(dāng)用window open打開(kāi)一個(gè)頁(yè)面，并把本頁(yè)的window的名字傳給要打開(kāi)的頁(yè)面的時(shí)候。重新賦予location.href的值的時(shí)候。通過(guò)input type=”submit”按鈕提交一個(gè)具有指定action的表單的時(shí)候。

瀏覽器支持程度

目前主流瀏覽器都支持這兩個(gè)事件屬性

概述

onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在<script>腳本中通過(guò)window.onunload來(lái)指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。 onbeforeunload也是在頁(yè)面刷新或關(guān)閉時(shí)調(diào)用，onbeforeunload是正要去服務(wù)器讀取新的頁(yè)面時(shí)調(diào)用，此時(shí)還沒(méi)開(kāi)始讀??；而onunload則已經(jīng)從服務(wù)器上讀到了需要加載的新的頁(yè)面，在即將替換掉當(dāng)前頁(yè)面時(shí)調(diào)用。onunload是無(wú)法阻止頁(yè)面的更新和關(guān)閉的，而 onbeforeunload 可以做到。

附：

頁(yè)面加載時(shí)只執(zhí)行onload

頁(yè)面關(guān)閉時(shí)先執(zhí)行onbeforeunload，最后onunload

頁(yè)面刷新時(shí)先執(zhí)行onbeforeunload，然后onunload，最后onload

附上部分效果圖：

綁定body標(biāo)簽的代碼：

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>測(cè)試</title>
  <script>
  　　function checkLeave(){
  　　　　event.returnValue="確定離開(kāi)當(dāng)前頁(yè)面嗎？";
  　　}
 　　</script>
 </head>
 <body onbeforeunload="checkLeave()">
  測(cè)試
 </body>
</html>

谷歌瀏覽器下的效果：

點(diǎn)擊刷新按鈕：

點(diǎn)擊返回按鈕：

通過(guò)任務(wù)欄或者收藏夾前往其他界面：

關(guān)閉頁(yè)面：

edge下的效果：

點(diǎn)擊刷新按鈕：

點(diǎn)擊返回按鈕：

關(guān)閉頁(yè)面：

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

綁定window對(duì)象的代碼：

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

火狐下的效果：

點(diǎn)擊刷新按鈕：