監聽關閉瀏覽器事件 js 監聽瀏覽器刷新仍是關閉事件

時間 2019-12-10

原文原文鏈接

主要是監聽了window的onbeforeunload事件，對通常的瀏覽器來講若是在這個事件監聽時返回一個字符串，它就會彈出一個對話框，但有的瀏覽器是使用event.returnValue，你可使用如下的兼容性代碼javascript

window.onbeforeunload = function (e) { var message = 'some word'; e = e || window.event; if (e) { e.returnValue = message; } return message; };

js 監聽瀏覽器刷新仍是關閉事件

原做者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309php

　　頁面加載時只執行onload
　　頁面關閉時只執行onunload
　　頁面刷新時先執行onbeforeunload，而後onunload，最後onload。
　　通過驗證我得出的結論是：
　　//對於ie，谷歌，360：
　　//頁面加載時只執行onload
　　//頁面刷新時，刷新以前執行onbeforeunload事件，在新頁面即將替換舊頁面時onunload事件，最後onload事件。
　　//頁面關閉時，先onbeforeunload事件，再onunload事件。html

　　//對於火狐：java

　　//頁面刷新時，只執行onunload;頁面關閉時，只執行onbeforeunload事件
　　那麼迴歸正題，到底怎樣判斷瀏覽器是關閉仍是刷新?我按照網上的各類說法實驗千百遍，都未成功，其中各類說法以下：json

 
           window.onbeforeunload =  
           function 
           ()  
           //author: meizz 
          
           { 
          
           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( 
           "是刷新而非關閉" 
           ); 
          
           } 
          
           } 
          
           window.onbeforeunload =  
           function 
           ()  
           //author: meizz 
          
           { 
          
           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( 
           "是刷新而非關閉" 
           ); 
          
           } 
          
           }

　　和瀏覽器

 
           function  
           CloseOpen(event) { 
          
           if 
           (event.clientX<=0 && event.clientY<0) { 
          
           alert( 
           "關閉" 
           ); 
          
           } 
          
           else 
          
           { 
          
           alert( 
           "刷新或離開" 
           ); 
          
           } 
          
           } 
          
           </script> 
          
           <body onunload= 
           "CloseOpen(event)" 
           >

　　這些方法都無論用，可是我並無放棄，想啊想啊........

　　按照上面我得出結論，

　　//對於ie，谷歌，360：

　　//頁面加載時只執行onload

　　//頁面刷新時，刷新以前執行onbeforeunload事件，在新頁面即將替換舊頁面時onunload事件，最後onload事件。

　　//頁面關閉時，先onbeforeunload事件，再onunload事件。

　　//對於火狐：

　　//頁面刷新時，只執行onunload;頁面關閉時，只執行onbeforeunload事件

　　刷新的時候先onbeforeunload，而後取服務端請求數據，在新頁面即將替換舊頁面時onunload事件，而頁面關閉時，先onbeforeunload事件，再當即onunload事件。那麼在刷新的時候，onbeforeunload與onunload之間的時間確定比關閉的時候時間長，通過測試確實如此。服務器

貼出個人測試代碼：post

 
      
       
         
         
           var  
           _beforeUnload_time = 0, _gap_time = 0; 
          
 
           var  
           is_fireFox = navigator.userAgent.indexOf( 
           "Firefox" 
           )>-1; 
           //是不是火狐瀏覽器 
          
 
           window.onunload =  
           function  
           (){ 
          
 
           _gap_time =  
           new  
           Date().getTime() - _beforeUnload_time; 
          
 
           if 
           (_gap_time <= 5) 
          
 
           $.post(pathName+ 
           "/back/bi!aaaa.s2?t=" 
           +_beforeUnload_time,{msg: 
           "瀏覽器關閉" 
           ,time:_gap_time}, 
           function 
           (json){}, 
           "text" 
           ); 
          
 
           else 
          
 
           $.post(pathName+ 
           "/back/bi!aaaa.s2?t=" 
           +_beforeUnload_time,{msg: 
           "瀏覽器刷新" 
           ,time:_gap_time}, 
           function 
           (json){}, 
           "text" 
           ); 
          
 
           } 
          
 
           window.onbeforeunload =  
           function  
           (){ 
          
 
           _beforeUnload_time =  
           new  
           Date().getTime(); 
          
 
           if 
           (is_fireFox) 
           //火狐關閉執行 
          
 
           $.post(pathName+ 
           "/back/bi!aaaa.s2?t=" 
           +_beforeUnload_time,{msg: 
           "火狐關閉" 
           }, 
           function 
           (json){}, 
           "text" 
           ); 
          
 
           }; 
          
 
       
 
      
    

　　服務端代碼（SSH實現）：測試

public void aaaa(){
System.out.println(base.getParameter("msg")+"，間隔："+base.getParameter("time"));
}

對於if(_gap_time <= 5)，此處的5是我預設的，按照客戶端瀏覽器而定，也與客戶端的機器配置有關係，個人機器關閉瀏覽器時onbeforeunload事件與onunload事件的數據間隔不超過2ms，而刷新時的間隔100%大於2ms，由於要訪問服務器。下面貼出個人測試結果：ui

下面給你們介紹瀏覽器關閉監聽事件，判斷刷新仍是關閉

　　使用onunload或onbeforeunload能夠監聽瀏覽器關閉事件，可是沒法區分關閉與刷新。如下js代碼能夠部分監聽關閉瀏覽器的事件！

 
           //鼠標相對於用戶屏幕的水平位置 - 窗口左上角相對於屏幕左上角的水平位置 = 鼠標在當前窗口上的水平位置 
          
           var  
           n = window.event.screenX - window.screenLeft; 
          
           //鼠標在當前窗口內時，n<m，b爲false；鼠標在當前窗口外時，n>m，b爲true。20這個值是指關閉按鈕的寬度 
          
           var  
           b = n > document.documentElement.scrollWidth-20; 
          
           //鼠標在客戶區內時，window.event.clientY>0；鼠標在客戶區外時，window.event.clientY<0 
          
           if 
           (b && window.event.clientY < 0 || window.event.altKey || window.event.ctrlKey){ 
          
           關閉瀏覽器時你想作的事 
          
           } 
           else  
           if 
           (event.clientY > document.body.clientHeight || event.altKey){ 
          
           關閉瀏覽器時你想作的事 
          
           }