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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue如何清空对象
Mar 03 Vue.js
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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python中循环语句while用法实例
2015/05/16 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python实现图像外边界跟踪操作
2020/07/13 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
委托公证书
2014/04/08 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
组织委员竞选稿
2015/11/21 职场文书
php引用传递
2021/04/01 PHP