夏日博客

A-A+

js判断页面是关闭还是刷新

2016年02月16日 前端设计 评论 1 条 阅读 7 views 次

原理就是通过离开页面行为时间onunload触发时间去检测此时的浏览器的窗口大小，根据大小由此判断用户是刷新，跳转或是关闭行为.

程序代码如下:

  1. window.onunload = function(){          
  2.         var a_n = window.event.screenX - window.screenLeft;          
  3.         var a_b = a_n > document.documentElement.scrollWidth-20;          
  4.         if(a_b && window.event.clientY< 0 || window.event.altKey){          
  5.                   alert('关闭页面行为');   
  6.         }else{   
  7.                   alert('跳转或者刷新页面行为');        
  8.             }   
  9. }  

用浏览器右上角的关闭按钮时好用，但在选项卡上关闭和在任务栏上关闭，这个方法就不作用了.

js标签只有onloadonunloadonbeforeunload事件，而没有onclose事件。

不管页面是关闭还是刷新都会执行onunload事件。

如何捕捉到页面关闭呢？

页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload，然后onunload，最后onload。

这样我们可以在onbeforeunload中加一个标记，在onunload中判断该标记，即可达到判断页面是否真的关闭了

更完整的兼容ff,代码如下:

  1. <mce:script type="text/javascript"><!--  
  2.         function close(evt) //author: sunlei  
  3.         {      
  4.             var isIE=document.all?true:false;  
  5.             evtevt = evt ? evt :(window.event ? window.event : null);  
  6.             if(isIE){//IE浏览器  
  7.                 var n = evt.screenX - window.screenLeft;  
  8.                 var b = n > document.documentElement.scrollWidth-20;  
  9.                 if(b && evt.clientY<0 || evt.altKey){  
  10.                     //alert("是关闭而非刷新");  
  11.                     window.location.href="../include/logout.php";  
  12.                 }  
  13.                 else{  
  14.                     //alert("是刷新而非关闭");  
  15.                     return false;  
  16.                 }  
  17.             }  
  18.             else{//火狐浏览器  
  19.                 if(document.documentElement.scrollWidth!=0)  
  20.                 {  
  21.                     //alert("是刷新而非关闭");  
  22.                     //window.location.href="report_list.php?ss=1";  
  23.                     return false;  
  24.                       
  25.                 }  
  26.                 else{  
  27.                     alert("是关闭而非刷新");  
  28.                     //window.location.href="repost_list.php?ss=0";  
  29.                     //alert("bbbbbbb");  
  30.                 }  
  31.             }  
  32.         }  
  33. // --></mce:script>  
  34. <BODY onunload="close(event);">  

上面的方法没办法判断多选项卡的浏览器，如360,ie8这种，下面再看,代码如下:

  1. function CloseOpen(event) {   
  2.          if(event.clientX<=0 || event.clientY<0) {   
  3.              //获取当前时间  
  4.            var date=new Date();  
  5.            //将date设置为过去的时间  
  6.            alert("关闭网页");  
  7.            date.setTime(date.getTime()-10000);  
  8.            //将userId这个cookie删除  
  9.            document.cookie="zhuangtao;expire="+date.toUTCString();  
  10.            document.cookie="quanxianzifucuan;expire="+date.toUTCString();  
  11.            document.cookie="quanxian;expire="+date.toUTCString();  
  12.           s0 += "关闭窗口!"; sw = 1;  
  13.             onbeforeunload();  
  14.            // window.event.returnValue = '关闭浏览器将退出系统.';  
  15.          }   
  16.          else   
  17.          {   
  18.                 alert("刷新或离开");   
  19.          }   
  20.   }   
  21.                 
  22.                 var currentKeyCode = -1;  
  23.     function document.onkeydown() { // 本窗口的所有下属页面都必须含有本函数  
  24.        top.currentKeyCode = event.keyCode;  
  25.     }  
  26.     function onbeforeunload(){  
  27.       
  28.      var sw = 0, s0 = "";  
  29.         if (currentKeyCode == 116)   
  30.         {  
  31.            s0 += "刷新窗口!(F5)";  
  32.         }  
  33.         else   
  34.         {  
  35.            if ((event.altKey)&&(currentKeyCode == 115))   
  36.             {  
  37.                   s0 += "关闭窗口!(alt+F4)"; sw = 1;  
  38.                    //获取当前时间  
  39.                    var date=new Date();  
  40.                    //将date设置为过去的时间  
  41.                   alert("关闭窗口");  
  42.                    date.setTime(date.getTime()-10000);  
  43.                    //将userId这个cookie删除  
  44.                    document.cookie="zhuangtao;expire="+date.toUTCString();  
  45.                    document.cookie="quanxianzifucuan;expire="+date.toUTCString();  
  46.                    document.cookie="quanxian;expire="+date.toUTCString();  
  47.             }  
  48.             else   
  49.             {  
  50.                if ((event.clientX > 0)&&(event.clientX < document.body.clientWidth))   
  51.                {  
  52.                   s0 += "刷新窗口!";  
  53.                }  
  54.                else   
  55.                {  
  56.                 //获取当前时间  
  57.                    var date=new Date();  
  58.                    //将date设置为过去的时间  
  59.                    alert("关闭网页");  
  60.                    date.setTime(date.getTime()-10000);  
  61.                    //将userId这个cookie删除  
  62.                    document.cookie="zhuangtao;expire="+date.toUTCString();  
  63.                    document.cookie="quanxianzifucuan;expire="+date.toUTCString();  
  64.                    document.cookie="quanxian;expire="+date.toUTCString();  
  65.                   s0 += "关闭窗口!"; sw = 1;  
  66.                }  
  67.             }  
  68.         }  
  69.         if (sw == 1)   
  70.         {  
  71.           event.returnValue = "";  
  72.         }  
  73.         else   
  74.         {  
  75.           currentKeyCode = -1;  
  76.         }  
  77.       
  78.     }  
  79. <body  onunload="CloseOpen(event)" ></body></html>  

上面只有不能使用在任务栏关闭了,基本可以满足我们的要求了.

标签：

1 条留言  访客：1 条  博主：0 条

  1. 司马青衫 2016年02月16日 下午 3:49  -199楼  回复

    博主这一次发这么多。。。。

给我留言