首頁 > 其他

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

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
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 = " http://www.w3.org/1999/xhtml " >
< 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( " 是重新整理而非關閉 " );   
     }   
}

解釋

其實這段代碼主要是用於聊天室視窗的，一般的聊天室視窗是除了標題列和側滑欄，其餘的XX欄都沒有的。用javascript彈出一個這樣的視窗的代碼是： 
<script language="JavaScript"> 
window.open('欲載入的網頁的地址','_blank','width=視窗寬,height=視窗高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes'); 
</script> 
其中值為“no”的就是不要的XX欄。 

這段代碼中有幾個屬性值得說明一下： 
1.window.onbeforeunload():此方法被觸發於： 
關閉瀏覽器視窗 
通過地址欄或收藏夾前往其他頁面的時候 
點擊返回，前進，重新整理，首頁其中一個的時候 
點擊 一個前往其他頁面的url串連的時候 

如果是用於上面我提到的聊天室視窗，那就只考慮兩個事件四個方法： 
1、正常關閉：點擊關閉按鈕（右上方，這個按鈕的大小和代碼中那個“-20”有關，最後我會說到）；或者 按下ALT+F4鍵（所以代碼中有對ALT鍵的檢測）。 
2、正常重新整理：按下F5鍵；或者 通過右鍵重新整理。 

2. 
window.event.screenX：滑鼠相對於使用者螢幕的水平位置 
window.screenLeft：視窗左上方相對於螢幕左上方的水平位置 
window.event.clientY：滑鼠在視窗用戶端區域（除去所有的XX欄）中的Y座標（比如在標題列上時，該值為負值） 
window.event.altKey：當alt鍵按下時，值為 TRUE ，否則為 FALSE 。唯讀。 
document.documentElement.scrollWidth：視窗網頁本文全文寬 

所以 
n = window.event.screenX - window.screenLeft： 
求出滑鼠在當前視窗上的水平位置（參照：當前視窗左上方為0、0座標）。 

b = n > document.documentElement.scrollWidth-20： 
只看水平座標：滑鼠在當前視窗內時，n<m，b為false；滑鼠在當前視窗外時，n>m，b為true。20這個值是指關閉按鈕的寬度。 m=document.documentElement.scrollWidth-20 

window.event.clientY < 0： 
只看垂直座標：滑鼠在客戶區內時，y>0，x為false；滑鼠在客戶區外時，y<0，x為true。y=window.event.clientY


綜上： 
當onbeforeunload時間發生時，有ALT按下，或者滑鼠的位置在標題列的最右上方（滑鼠停留在關閉按鈕上時）。就能執行if為真的語句了。 

window.event.returnValue = ""; 主要是用來當使用者關閉了視窗而不是重新整理時返回一個值，這個值由你設定。 注意：
這個代碼看似不錯，但是有一點，它的基礎是以使用者的瀏覽器視窗為標準windows視窗而定的。也就是說，使用者的瀏覽器視窗得是win2000那個樣子的，因為這個樣子下，關閉按鈕的大小才會在 20 象素以內。如果使用者的視窗不是標準的windows視窗，而是其它的主題等等，這段代碼可能就用不了了。
此外有個小BUG，當滑鼠停留在最右上方（關閉按鈕）時按下F5。代碼會執行關閉視窗時的代碼，但是視窗卻只是重新整理而已卻不會關閉。
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的表單的時候。 

　　樣本： < html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More