javascript判断网页是关闭还是刷新


Posted in Javascript onSeptember 12, 2015

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

 代码如下 

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

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

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

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

如何捕捉到页面关闭呢?
页面加载时只执行onload
页面关闭时只执行onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

这样我们可以在onbeforeunload中加一个标记,在onunload中判断该标记,即可达到判断页面是否真的关闭了
更完整的兼容ff

 代码如下 

<mce:script type="text/javascript"><!--
    function close(evt) //author: sunlei
    {  
      var isIE=document.all?true:false;
      evt = evt ? evt :(window.event ? window.event : null);
      if(isIE){//IE浏览器
        var n = evt.screenX - window.screenLeft;
        var b = n > document.documentElement.scrollWidth-20;
        if(b && evt.clientY<0 || evt.altKey){
          //alert("是关闭而非刷新");
          window.location.href="../include/logout.php";
        }
        else{
          //alert("是刷新而非关闭");
          return false;
        }
      }
      else{//火狐浏览器
        if(document.documentElement.scrollWidth!=0)
        {
          //alert("是刷新而非关闭");
          //window.location.href="report_list.php?ss=1";
          return false;
          
        }
        else{
          alert("是关闭而非刷新");
          //window.location.href="repost_list.php?ss=0";
          //alert("bbbbbbb");
        }
      }
    }
// --></mce:script>
<BODY onunload="close(event);">

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

 代码如下 

function CloseOpen(event) { 
     if(event.clientX<=0 || event.clientY<0) { 
       //获取当前时间
      var date=new Date();
      //将date设置为过去的时间
      alert("关闭网页");
      date.setTime(date.getTime()-10000);
      //将userId这个cookie删除
      document.cookie="zhuangtao;expire="+date.toUTCString();
      document.cookie="quanxianzifucuan;expire="+date.toUTCString();
      document.cookie="quanxian;expire="+date.toUTCString();
     s0 += "关闭窗口!"; sw = 1;
      onbeforeunload();
      // window.event.returnValue = '关闭浏览器将退出系统.';
     } 
     else 
     { 
        alert("刷新或离开"); 
     } 
 } 
       
        var currentKeyCode = -1;

  function document.onkeydown() { // 本窗口的所有下属页面都必须含有本函数

    top.currentKeyCode = event.keyCode;
  }

  function onbeforeunload(){
  
   var sw = 0, s0 = "";
    if (currentKeyCode == 116) 
    {
      s0 += "刷新窗口!(F5)";
    }
    else 
    {
      if ((event.altKey)&&(currentKeyCode == 115)) 
      {
         s0 += "关闭窗口!(alt+F4)"; sw = 1;
          //获取当前时间
          var date=new Date();
          //将date设置为过去的时间
         alert("关闭窗口");
          date.setTime(date.getTime()-10000);
          //将userId这个cookie删除
          document.cookie="zhuangtao;expire="+date.toUTCString();
          document.cookie="quanxianzifucuan;expire="+date.toUTCString();
          document.cookie="quanxian;expire="+date.toUTCString();
      }
      else 
      {
        if ((event.clientX > 0)&&(event.clientX < document.body.clientWidth)) 
        {
         s0 += "刷新窗口!";
        }
        else 
        {
        //获取当前时间
          var date=new Date();
          //将date设置为过去的时间
          alert("关闭网页");
          date.setTime(date.getTime()-10000);
          //将userId这个cookie删除
          document.cookie="zhuangtao;expire="+date.toUTCString();
          document.cookie="quanxianzifucuan;expire="+date.toUTCString();
          document.cookie="quanxian;expire="+date.toUTCString();
         s0 += "关闭窗口!"; sw = 1;
        }
      }
    }
    if (sw == 1) 
    {
     event.returnValue = "";
    }
    else 
    {
     currentKeyCode = -1;
    }
  
  }

<body onunload="CloseOpen(event)" ></body></html>

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

以上内容就是本文给大家介绍的javascript判断网页是关闭还是刷新,希望大家喜欢。

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
json原理分析及实例介绍
Nov 29 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
You might like
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Jquery ui css framework
2010/06/28 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
python截取两个单词之间的内容方法
2018/12/25 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python解析json代码实例解析
2019/11/25 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
策划创业计划书
2014/02/06 职场文书
小学信息技术教学反思
2014/02/10 职场文书
2014政务公开实施方案
2014/02/19 职场文书
药店促销活动策划方案
2014/08/24 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技