onbeforeunload與onunload事件

阿新 • • 發佈：2019-01-19

Onunload，onbeforeunload都是在重新整理或關閉時呼叫，可以在<script>指令碼中通過 window.onunload來指定或者在<body>裡指定。區別在於onbeforeunload在onunload之前執行，它還可以阻止onunload的執行。　　Onbeforeunload也是在頁面重新整理或關閉時呼叫，Onbeforeunload是正要去伺服器讀取新的頁面時呼叫，此時還沒開始讀取；而onunload則已經從伺服器上讀到了需要載入的新的頁面，在即將替換掉當前頁面時呼叫。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。

1、onbeforeunload事件：
　　說明：目前三大主流瀏覽器中firefox和IE都支援onbeforeunload事件,opera尚未支援。
用法：
·object.onbeforeunload = handler
·<element onbeforeunload = “handler” … ></element>
描述：
事件觸發的時候彈出一個有確定和取消的對話方塊，確定則離開頁面，取消則繼續待在本頁。handler可以設一個返回值作為該對話方塊的顯示文字。　　觸發於：
　　·關閉瀏覽器視窗
　　·通過位址列或收藏夾前往其他頁面的時候
　　·點選返回，前進，重新整理，主頁其中一個的時候

　　·點選一個前往其他頁面的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的表單的時候。

　　可以用在以下元素：
　　·BODY, FRAMESET, window
　　平臺支援：
　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
　　示例：

<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>onbeforeunload測試</title><script>function checkLeave(){
　event.returnValue="確定離開當前頁面嗎？";
}
</script></head><body onbeforeunload="checkLeave()"></body></html>

但是onbeforeunload有個小毛病，就是頁面重新整理時，他還是會呼叫到onbeforeunload，為什麼？其實重新整理就相當於關閉了這個IE再重新開啟的意思，因此還是會呼叫到onbeforeunload。

究竟怎麼解決重新整理不呼叫onbeforeunload呢？

網上提供很多方法，本人覺得最實用還是以下這段JS

window.onbeforeunload   =   function(){   
      var   n   =   window.event.screenX   -   window.screenLeft;   
      var   b   =   n   >   document.documentElement.scrollWidth-20;   
      if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)   
      {   
          alert("是關閉而非重新整理");   
          window.event.returnValue   =   "是否關閉？";
      }else{
             alert("是重新整理而非關閉");   
     }   
}

2、onunload事件
用法：
·object.onbeforeunload = handler
·<element onbeforeunload = "handler"></element> 　　描述：
當用戶關閉一個頁面時觸發 onunload 事件。　　觸發於：
　　·關閉瀏覽器視窗
　　·通過位址列或收藏夾前往其他頁面的時候
　　·點選返回，前進，重新整理，主頁其中一個的時候
　　·點選一個前往其他頁面的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的表單的時候。

　　示例：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>onunload測試</title><script>　　function checkLeave(){
　　　　alert("歡迎下次再來！");
　　}
</script></head><body onunload="checkLeave()"></body></html>

onbeforeunload與onunload事件

關於監控視窗是否關閉的onbeforeunload與onunload事件

onbeforeunload與onunload事件

獲取頁面離開onbeforeunload與onunload事件的返回值

用js判斷頁面重新整理或關閉的方法(onbeforeunload與onunload事件)

關閉瀏覽器事件 onbeforeunload和onunload

JavaScript觸摸與手勢事件

總結oninput、onchange與onpropertychange事件的使用方法和差別

bug-3——onload，onbeforeunload，Onunload的區別

js click 與 onclick 事件綁定與解綁

移動端web，tap與click事件

jquery論callback事件發生與並列事件發生的區別

a標簽的href與click事件

關於Application_End 與 Application_Start事件觸發情況的測試（待續）

oninput、onchange與onpropertychange事件的區別

總結oninput、onchange與onpropertychange事件的用法和區別

ready事件與load事件的深入理解--

innerHTML與button事件衝突解決辦法

Vue一個案例引發的動態元件與全域性事件繫結總結

onload事件與ready事件的區別，原生js與jquery的區別

[日常]nginx與網路事件模型

onbeforeunload與onunload事件

相關推薦