js 监听浏览器刷新还是关闭事件

article/2025/8/19 7:03:13

//    $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';});
//    window.onbeforeunload = function() { return "确定离开此页面吗?"; };
//    function myFunction() {return "自定义内容";}
//    window.onbeforeunload = function(event) {event.returnValue = "确定离开此页面吗?";}

页面加载时只执行onload

  页面关闭时只执行onunload
  页面刷新时先执行onbeforeunload,然后onunload,最后onload。
  经过验证我得出的结论是:
  //对于ie,谷歌,360:
  //页面加载时只执行onload
  //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。
  //页面关闭时,先onbeforeunload事件,再onunload事件。

  //对于火狐:

  //页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件
  那么回归正题,到底怎样判断浏览器是关闭还是刷新?我按照网上的各种说法实验千百遍,都未成功,其中各种说法如下:

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("是刷新而非关闭");}
}
functionCloseOpen(event) {if(event.clientX<=0 && event.clientY<0) {alert("关闭");} else {alert("刷新或离开");}}
</script>
<body οnunlοad="CloseOpen(event)">
这些方法都不管用,但是我并没有放弃,想啊想啊........

  按照上面我得出结论,
  //对于ie,谷歌,360:
  //页面加载时只执行onload
  //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。
  //页面关闭时,先onbeforeunload事件,再onunload事件。
  //对于火狐:
  //页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件

  刷新的时候先onbeforeunload,然后取服务端请求数据,在新页面即将替换旧页面时onunload事件,而页面关闭时,先onbeforeunload事件,再立即onunload事件。那么在刷新的时候,onbeforeunload与onunload之间的时间肯定比关闭的时候时间长,经过测试确实如此。

贴出我的测试代码:

var_beforeUnload_time = 0, _gap_time = 0;
varis_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,因为要访问服务器。下面贴出我的测试结果:

下面给大家介绍浏览器关闭监听事件,判断刷新还是关闭

  使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件!

//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
varn = window.event.screenX - window.screenLeft;
//鼠标在当前窗口内时,n<mbfalse;鼠标在当前窗口外时,n>mbtrue20这个值是指关闭按钮的宽度
varb = 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){alert('关闭浏览器时你想做的事');
}elseif(event.clientY > document.body.clientHeight || event.altKey){alert('关闭浏览器时你想做的事');
}


http://chatgpt.dhexx.cn/article/ttOq3baQ.shtml

相关文章

浏览器刷新和页面手动为什么不一样?

Fiddler(2):AutoResponse修改返回结果_mb5fed6ec4336ce的技术博客_51CTO博客Fiddler(2):AutoResponse修改返回结果&#xff0c;前言怎么修改接口的返回数据呢步骤1.抓包&#xff0c;找到要拦截的请求&#xff0c;然后在AutoResponder中AddRule&#xff1a;2.在RuleEditor中的第…

vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求

vue监听浏览器刷新和关闭事件&#xff0c;并在页面关闭/刷新前发送请求 1.需求背景&#xff1a;2.需求分析&#xff1a;3.实现方式&#xff1a;4.实现方式解析&#xff1a;1&#xff09;浏览器页面事件基础2&#xff09;在mounted监听beforeunload和unload事件 5.存在的问题/风…

浏览器刷新和关闭时显示提示信息

vue 刷新和关闭浏览器时显示提示信息 使用onbeforeunload事件 mounted() {window.onbeforeunload e > {e e || window.eventif (e) {e.returnValue 关闭提示}return 关闭提示}} }, beforeDestroy() {window.onbeforeunload null },如果是所有页面都需要页面销毁显示提…

【Vue实用功能】Vue监听浏览器刷新和关闭事件

Vue监听浏览器刷新和关闭事件 在前端开发中&#xff0c;我们通常会遇到这样的需求&#xff0c;用户离开、刷新页面前&#xff0c;修改数据未进行保存操作&#xff0c;需要提示框提醒用户 效果实现 methods: {/** 在刷新和关闭之前询问 **/beforeRefreshClose() {let self t…

vue监听浏览器刷新和关闭;

注意&#xff1a;区分不了浏览器是触发了刷新还是关闭&#xff0c;而且提示的弹框是无法自定义的&#xff1b;如果有大佬有方法能区分&#xff0c;还请评论学习一下&#xff01;感谢&#xff01; 代码可直接复制&#xff1a; <template><div><div /></di…

JS阻止浏览器刷新的方法

直接先给朋友们上阻止浏览器刷新的代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&quo…

VSCODE同步浏览器刷新

VSCODE同步浏览器刷新 安装插件 live server

java中foreach的用法

文章目录 前言语法用法用法1&#xff1a;输出一维数组用法2&#xff1a;输出二维数组foreach的局限性什么是索引 总结 前言 java中foreach,可以认为是增强版的for语句循环&#xff0c;它可以减少代码量&#xff0c;但是不是所有的foreach都可以代替for循环。 语法 foreach的…

JAVA实现九九乘法表

用java语言实现九九乘法表&#xff0c;这里使用的是for循环 public class NineNineDemo{public static void main(String[] args){int i1;//对行变量赋值int j1;//对列变量赋值for(i1;i<9;i){for(j1;j<i;j){//行变量外循环&#xff1b;列变量内循环System.out.print(i&q…

Java的ASCII编码表

数字和字符的对照关系表&#xff08;编码表&#xff09;&#xff1a; ASCII码表&#xff1a;American Standard Code for Information Interchange, 美国信息交换标准代码。 Unicode码表&#xff1a;万国码。也是数字和符号的对照关系&#xff0c;开头0-127部分和ASCII完全一样…

JAVA——链表

一、链表概念及结构 链表&#xff1a;链表是一种物理存储结构上非连续存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引用链接次序实现的。如下图&#xff1a;&#xff08;通俗的说&#xff1a;就是由一个个节点组成&#xff0c;这些节点逻辑上连续&#xff0c;物理上…

java对象复制_Java对象的复制三种方式

Java对象的复制三种方式 概述 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能 会需要一个和A完全相同新对象B,并且此后对B任何改动都不会影响到A中的值,也就是说,A与B是两个独立的对象,但B的初始值是由A对象确定的。…

Java 如何复制 List ?

List 复制在项目开发时&#xff0c;使用到的频率还是比较高的。List 复制有浅拷贝和深拷贝两种方式。在陈述复制方法前&#xff0c;先总结下什么是浅拷贝和深拷贝(以下内容均站在 Java 语言基础上进行讨论)。 一、什么是浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&a…

Java对象复制

文章目录 前言何不可变类对象复制方式1.直接赋值2.浅拷贝3.深拷贝 对象复制方案1.get/set2.Spring BeanUtils3.Apache BeanUtils4.BeanCopier5.Orika6.Dozer7.MapStruct8.Bean Mapping9.Bean Mapping ASM10.ModelMapper11.JMapper12.Json2Json 复制方案选择 前言 在我们实际项…

Java 复制Excel工作表

本文归纳了关于Java如何复制Excel工作表的方法&#xff0c;按不同复制需求&#xff0c;可分为&#xff1a; 1. 复制工作表 1.1 在同一个工作簿内复制工作表 1.2 在不同工作簿间复制工作表 2. 复制指定单元格数据 对于复制方法copy()&#xff0c;这里简单整理了一个表格&am…

个人如何接入微信支付和支付宝等支付接口,免签约

企业的资质足够高了才能够得到微信或者支付宝官方的支付接口&#xff08;而且这个官方接口收费的最低费率在0.38%以上&#xff09;那么个人如何做&#xff1f; 个人开发者或者小微企业团队如何使用在线收款支付功能呢&#xff1f; 第四方支付&#xff0c;市面上各种收款工具要…

微信支付接口开发详流程

微信支付 文章目录 1.支付接口分析2. 开发创建订单接口3. 开发根据订单id查询订单详情接口4. 开发生成二维码接口5. 开发查询订单支付状态接口 1.支付接口分析 引入依赖 <dependencies><dependency><groupId>com.github.wxpay</groupId><artifact…

微信支付API v3接口使用应用篇

目录 前言版本应用基础配置1.申请商户API证书2.设置接口密钥3.下载平台证书 接口实测微信支付API官方客户端1.客户端2.支付调起参数签名3.回调通知 参考资料 前言 最近新项目中有涉及到微信支付相关接口业务的交互&#xff0c;毕竟原先开发接触过支付这块&#xff0c;轻车熟路…

Java对接微信、支付宝、银联第三方支付

一、微信支付 1、业务平台介绍&#xff1a; &#xff08;1&#xff09;微信公众平台 微信公众平台是微信公众账号申请入口和管理后台。商户可以在公众平台提交基本资料、业务资料、财务资料申请开通微信支付功能。 &#xff08;2&#xff09; 微信开放平台 微信开放平台是商…

php微信支付宝第三方接口开发平台,帝国CMS第三方个人支付接口微信支付宝免签约即时到账api_帝国网站管理系统插件...

帝国CMS网站管理系统是一个高效的网站解决方案,本文将给出开发好的帝国CMS第三方个人免签约支付接口插件(支持支付宝/微信扫码即时到账支付),可用于帝国系统收款使用,供有需求的用户参考或快速接入。本代码无加密完全开源,欢迎参考/使用。 概述 环境 本接口插件基于帝国CMS…