JS获取浏览器刷新、关闭事件
Javascript前台捕获浏览器关闭事件,后台处理一些善后工作
Javascript前台捕获浏览器关闭事件，后台处理一些善后工作1.使用onbeforeunload 事件捕获浏览器关闭事件IE和火狐都支持onbeforeunload事件，但是opera不支持。
注意：不仅关闭浏览器时会触发onbeforeunload事件，刷新等事件也会触发onbeforeunload事件。
2.事件注册方法<body onbeforeunload="CloseBrowse();"></body>3.使用Ajax技术向服务器异步发送需要做的善后工作这里以登陆为例：当用户关闭浏览器时，需要把用户登陆的状态修改为‘已退出’。
由于用户登陆的状态存放在服务器的数据库中，所有必需在客户端捕获浏览器关闭动作，在浏览器关闭之前，向服务器发送一个请求，当然这个的请求是异步发送的（Ajax技术）；服务器收到请求后，把当前用户的登陆状态修改为‘已退出’。
function CloseBrowse()//用户关闭浏览器{var n = window.event.screenX - window.screenLeft;var b = n > document.documentElement.scrollWidth - 20;//可以捕获点击小差和 Alt+F4 时浏览器关闭的情况，但是不能捕获在多窗口浏览模式下，用户点多窗口模式的小差关闭浏览器的情况if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState";UpdateLoginState(url);}}//使用Ajax 向服务器发送异步请求，要求服务器修改登录状态function UpdateLoginState() {var url = "Service.asmx/UpdateLoginState";SendRequestToWebService(url);}function SendRequestToWebService(url){createXmlhttp();xmlhttp.open("POST", url, true);//xmlhttp.onreadystatechange = handleStateChange;xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");xmlhttp.send();}//创建XMLHttpRequest对象function createXmlhttp() {if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}else if (window.ActiveXObject) {try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlhttp;}4.使用服务器的WebService技术处理客户端发来的请求[WebMethod(EnableSession = true)]public void UpdateLoginState()//修改登录状态{T_LoginCookTableAdapter tad = new T_LoginCookTableAdapter();if (Session["userName"] != null){//根据Session保存的用户名，修改当前用户的登陆状态tad.UpdateLoginState(Session["loginName"].ToString());}}注意：客户端发送的请求url属性是：url= "Service.asmx/UpdateLoginState";这就需要服务器的端的WebService文件名为：Service.asmx，处理请求的函数名为：UpdateLoginStateBug：上述解决方案可以很好的解决用户通过点击浏览器右上角的关闭按钮，和使用快捷键Alt+F4关闭浏览器的情况，但不能解决用户在多窗口模式下，进关闭当前浏览的页面情况，如下所示：QQ：604671517希望知道如何解决上述问题的大虾们不吝赐教！。
js区分返回和刷新的方法
js区分返回和刷新的方法在JavaScript中，我们可以使用不同的方法来区分页面是被返回（back）还是被刷新（refresh）的。
下面我将从几个角度来介绍这些方法：1. 利用浏览器历史记录：当用户点击浏览器的返回按钮时，页面会从浏览器的历史记录中加载上一个页面。
我们可以利用`window.history`对象来判断页面是被返回还是被刷新。
`window.history`对象提供了一些方法和属性来操作浏览器的历史记录，比如`length`属性可以获取历史记录的长度，`back()`方法可以让页面返回上一个页面。
我们可以通过判断历史记录的长度来确定页面是被返回还是被刷新。
例如：javascript.if (window.history.length > 1) {。
// 页面是被返回。
} else {。
// 页面是被刷新。
}。
2. 利用页面加载事件：当页面被刷新时，会触发`load`事件，而当页面被返回时，通常不会触发`load`事件。
我们可以利用这一点来区分页面是被返回还是被刷新。
例如：javascript.window.addEventListener('load', function() {。
if (performance.navigation.type === 2) {。
// 页面是被刷新。
} else {。
// 页面是被返回。
}。
});3. 利用缓存状态：当页面被刷新时，浏览器会重新请求页面资源，而当页面被返回时，浏览器通常会使用缓存的资源。
我们可以通过检查页面资源的加载情况来区分页面是被返回还是被刷新。
例如：javascript.window.addEventListener('load', function() {。
if(performance.getEntriesByType('navigation')[0].type === 'reload') {。
javascript监听页面刷新和页面关闭事件方法详解
javascript监听页⾯刷新和页⾯关闭事件⽅法详解在我们的⽇常⽣活中，时常遇到这么⼀种情况，当我们在点击⼀个链接、关闭页⾯、表单提交时等情况，会提⽰我们是否确认该操作等信息。
这⾥就给⼤家讲讲javascript的onbeforeunload()和onunload()两个事件。
相同点:两者都是在对页⾯的关闭或刷新事件作个操作。
不同点：1. unbeforeunload（）事件执⾏的顺序在onunload()事件之前发⽣。
(因为，unbeforeunload()是在页⾯刷新之前触发的事件，⽽onubload()是在页⾯关闭之后才会触发的)。
2. unbeforeunload（）事件可以禁⽌onunload()事件的触发。
3. onunload()事件是⽆法阻⽌页⾯关闭的。
4. 浏览器的兼容onunload:IE6，IE7，IE8 中刷新页⾯、关闭浏览器之后、页⾯跳转之后都会执⾏；IE9 刷新页⾯会执⾏，页⾯跳转、关闭浏览器不能执⾏；firefox(包括firefox3.6) 关闭标签之后、页⾯跳转之后、刷新页⾯之后能执⾏，但关闭浏览器不能执⾏；Safari 刷新页⾯、页⾯跳转之后会执⾏，但关闭浏览器不能执⾏；Opera、Chrome 任何情况都不执⾏。
onbeforeunload:IE、Chrome、Safari 完美⽀持Firefox 不⽀持⽂字提醒信息Opera 不⽀持IE6,IE7会出现bug ⽰例代码:onbeforeunload()：⽅式⼀:html元素中添加<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body onbeforeunload="return myFunction()"><p>该实例演⽰了如何向 body 元素添加 "onbeforeunload" 事件。
JS针对浏览器窗口关闭事件的监听方法集锦
JS针对浏览器窗⼝关闭事件的监听⽅法集锦本⽂实例总结了JS针对浏览器窗⼝关闭事件的监听⽅法。
分享给⼤家供⼤家参考，具体如下：⽅式⼀：(适⽤于IE浏览器，⽽且刷新不提⽰，只在点击浏览器关闭按钮的时候提⽰)<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){return "您要离开吗？";}}</script>⽅式⼆：适⽤于IE和FF，不区分刷新和关闭<script type="text/javascript">window.onbeforeunload = onbeforeunload_handler;window.onunload = onunload_handler;function onbeforeunload_handler(){var warning="确认退出?";return warning;}function onunload_handler(){var warning="谢谢光临";alert(warning);}</script>⽅式三：适⽤于IE和FF，不区分刷新和关闭，最简单的<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){return "您确定退出吗？";}</script>⽅式四：适⽤于IE和FF，不区分刷新和关闭，稍复杂的<script language="javascript">var MSG_UNLOAD="如果你此时离开档案系统，所做操作信息将全部丢失，是否离开?";var UnloadConfirm = {};//启⽤监听浏览器刷新、关闭的⽅法UnloadConfirm.set = function(confirm_msg){window.onbeforeunload = function(event){event = event || window.event;event.returnValue = confirm_msg;}}//关闭监听浏览器刷新、关闭的⽅法UnloadConfirm.clear = function(){window.onbeforeunload = function(){};}UnloadConfirm.set(MSG_UNLOAD);</script>⽅式五：只适⽤于IE6下的关闭按钮和快捷键关闭的，刷新不提⽰<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){var warnning = '<fmt:message key="systemMessage.exitWarning" />';var beforeExit='<fmt:message key="systemMessage.beforeExitWarning" />';if(event.clientY<0 && event.clientX>document.body.clientWidth-20 || event.clientY<0 && event.clientX<20 ||event.altKey || event.ctrlKey || event.clientY>document.body.clientHeight){alert(beforeExit);return warnning;}}</script>另附判断浏览器类型的JS<script type="text/javascript">var Sys = {};var ua = erAgent.toLowerCase();if (window.ActiveXObject)Sys.ie = ua.match(/msie ([\d.]+)/)[1]else if (document.getBoxObjectFor)Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]else if (window.MessageEvent && !document.getBoxObjectFor)Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]else if (window.opera)Sys.opera = ua.match(/opera.([\d.]+)/)[1]else if (window.openDatabase)Sys.safari = ua.match(/version\/([\d.]+)/)[1];//以下进⾏测试if(Sys.ie) document.write('IE: '+Sys.ie);if(Sys.firefox) document.write('Firefox: '+Sys.firefox);if(Sys.chrome) document.write('Chrome: '+Sys.chrome);if(Sys.opera) document.write('Opera: '+Sys.opera);if(Sys.safari) document.write('Safari: '+Sys.safari);</script>区分浏览器，IE和FF分别处理（奇怪的是,IE下有时候失效）<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){var Sys = {};var warnning = '<fmt:message key="systemMessage.exitWarning" />';var ua = erAgent.toLowerCase();if (window.ActiveXObject)Sys.ie = ua.match(/msie ([\d.]+)/)[1]else if (document.getBoxObjectFor)Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]if(Sys.ie) {//for IEif(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){window.event.returnValue = warnning ;}}if(Sys.firefox) //for FFreturn warnning;}</script>最简单的判断浏览器类型的⽅法<script type="text/javascript">if(-[1,]){alert("这不是IE浏览器！");}else{alert("这是IE浏览器！");}</script>[1，]在标准浏览器会返回字符串"1",相当于调⽤[1,].toString,,IE则返回"1,"。
js关闭浏览器窗口及检查浏览器关闭事件
js检查浏览器关闭或刷新事件，主动弹出提示框。支持ie6+，火狐，谷歌等浏览器。 复制代码 代码如下:
<html> <head /> <body> <script type="text/javascript"> window.onbeforeunload = function(){ return "quit?"; } </script> </body> </html>
这篇文章主要为大家详细介绍了js实现轮播图小案例文中示例代码介绍的非常详细具有一定的参考价值感兴趣的小伙伴们可以参考一下
js关 闭 浏 览 器 窗 口 及 检 查 浏 览 器 关 闭 事 件
js关闭浏览器窗口，不弹出提示框。支持ie6+，火狐，谷歌等浏览器。 复制代码 代码如下:
<html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.open('','_self',''); window.close(); } </script> <a onclick="closeWin()" href="#">logout</a> </body> </html>
关闭浏览器触发方法
关闭浏览器触发方法浏览器关闭触发方法是指当用户关闭浏览器时，浏览器会执行一些特定的操作或触发一些事件。
这些方法可以用于处理一些特定的需求，例如保存用户的临时数据、清理缓存或发送一些关闭事件等。
在不同的浏览器中，关闭浏览器触发方法可能有所不同。
下面将分别介绍几种常见的浏览器关闭触发方法。
1. JavaScript的beforeunload事件：beforeunload事件在浏览器关闭之前触发，可以用来提示用户是否保存修改过的数据或执行一些清理操作。
在这个事件中，可以使用event.returnValue属性来设置一个返回值，如果返回一个非空字符串，浏览器会弹出一个确认框来提示用户是否关闭页面。
2. WebSocket的close事件：在使用WebSocket进行实时通信时，当用户关闭浏览器或断开与服务器的连接时，WebSocket对象会触发close事件。
我们可以在close事件的回调函数中执行一些清理操作或发送一些关闭事件给服务器。
3. 页面卸载事件：除了beforeunload事件，还有unload事件和pagehide事件可以用于在页面关闭或跳转时执行一些操作。
unload事件在页面即将关闭时触发，而pagehide事件则在页面隐藏时触发（例如浏览器切换标签页或最小化窗口）。
在这两个事件中，我们可以执行一些清理操作或发送一些关闭事件给服务器。
4. 服务器端的关闭事件：在一些特定的场景中，我们可能需要在用户关闭浏览器时执行一些服务器端的操作，例如更新用户的在线状态或清理用户的临时数据。
可以通过监听WebSocket的close事件或使用长连接等方式来实现。
总结一下，关闭浏览器触发方法可以通过JavaScript的beforeunload事件、WebSocket的close事件、页面卸载事件和服务器端的关闭事件来实现。
这些方法可以用于处理一些特定的需求，例如保存用户的临时数据、清理缓存或发送一些关闭事件等。
简述在Js或Vue中监听页面的刷新、关闭操作
简述在Js或Vue中监听页⾯的刷新、关闭操作1、背景⼤家是否经常遇到在关闭⽹页的时候，会看到⼀个确定是否离开当前页⾯的提⽰框？想⼀些在线测试系统、信息录⼊系统等就经常会有这⼀些提⽰，避免⽤户有意或者⽆意中关掉了页⾯，导致数据丢失。
⽽最近在做项⽬的时候有⼀个需求，⽤户在表单页⾯中进⾏操作，为了防⽌⽤户在未保存表单数据的情况下离开、刷新页⾯等造成数据的丢失，需要在这种操作下出现是否离开的提⽰框，这⾥⾯的实现过程很简单，利⽤了HTML DOM事件中的和⽅法。
2、解决思路阻拦，每次就是阻拦，⽽阻拦⼜有两种⽅法，⼀种是直接return，不管return的是什么；⼀种是修改事件的returnValue，两者效果是⼀样的。
3、两个属性的对⽐定义onbeforeunload ：onbeforeunload 事件在即将离开当前页⾯（刷新或关闭）时触发。
该事件可⽤于弹出对话框，提⽰⽤户是继续浏览页⾯还是离开当前页⾯。
对话框默认的提⽰信息根据不同的浏览器有所不同，标准的信息类似"确定要离开此页吗？"。
该信息不能删除。
但你可以⾃定义⼀些消息提⽰与标准信息⼀起显⽰在对话框。
注意：如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使⽤ returnValue 属性创建⾃定义信息(查看以下语法实例)。
注意：在 Firefox 与 Chrome 浏览器中，只显⽰默认提醒信息（不显⽰⾃定义信息）onunload ：onunload 事件在⽤户退出页⾯时发⽣。
onunload 发⽣于当⽤户离开页⾯时发⽣的事件(通过点击⼀个连接，提交表单，关闭浏览器窗⼝等等。
)注意： onunload 事件同样触发了页⾯载⼊事件(+ onload 事件)。
浏览器对onbeforeunload与onunload两个属性的⽀持程度onbeforeunload ：onunload ：使⽤onbeforeunload ：//body中<body onbeforeunload="beforeunloadHandler()"></body>//window中 vue写在mounted中window.onbeforeunload = function(e) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = "您是否确认离开此页⾯-您输⼊的数据可能不会被保存";}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return"您是否确认离开此页⾯-您输⼊的数据可能不会被保存";};//使⽤addEventListenerwindow.addEventListener("beforeunload", e => {this.beforeunloadHandler(e);});onunload ：//body中<body onunload="beforeunloadHandler()"></body>//window中 vue写在mounted中window.onunload = function(e) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = "您是否确认离开此页⾯-您输⼊的数据可能不会被保存";}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return"您是否确认离开此页⾯-您输⼊的数据可能不会被保存";};两者之间的区别onbeforeunload、onunload都是在刷新或关闭时调⽤，可以在<body>⾥指定，也可以在原⽣的JS中在<script>脚本中通过window.⽅法名或者在vue的mounted⾥⾯通过window.⽅法名进⾏指定，区别在于onbeforeunload在onunload之前执⾏，它还可以阻⽌onunload的执⾏。
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗⼝失去焦点事件,判断离开页⾯刷新或关闭的⽅法js捕捉IE窗⼝失去焦点事件,判断离开页⾯刷新或关闭的⽅法javascript如何捕捉IE窗⼝失去焦点事件window.onblur = function(e) {//you code};弹框的要控制次数有⼏种⽅案，⼀种是放到cookies⾥⾯保存code，会影响到其他⽂件请求都带上cookies值，⽤户访问⽂章多了以后⽐较影响请求响应。
另外⼀种就是在当前页⾯加个全局变量，⼀次只弹⼀次，下次刷新后也只弹⼀次，当然也可以加个次数的控制。
================================================⼀个判断页⾯是否真的关闭和刷新的好⽅法：window.onbeforeunload=function(event){if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){alert("你关闭了浏览器");}else{alert("你正在刷新页⾯");}}这段代码就是判断触发onbeforeunload事件时，⿏标是否点击了关闭按钮，或者按了ALT+F4来关闭⽹页，如果是，则认为系统是关闭⽹页，否则在认为系统是刷新⽹页。
---------------------------------------onbeforeunload与onunload事件Onunload，onbeforeunload都是在刷新或关闭时调⽤，可以在<script>脚本中通过window.onunload 来指定或者在<body>⾥指定。
区别在于onbeforeunload在onunload之前执⾏，它还可以阻⽌onunload的执⾏。
Onbeforeunload也是在页⾯刷新或关闭时调⽤，Onbeforeunload是正要去服务器读取新的页⾯时调⽤，此时还没开始读取；⽽onunload则已经从服务器上读到了需要加载的新的页⾯，在即将替换掉当前页⾯时调⽤。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
由于浏览器是无状态的，在这时候捕捉浏览器关闭会出现两种情况：
1.真正的关闭浏览器(a.点击关闭按钮b.右击任务栏关闭c.按alt+F4关闭)
2.刷新浏览器。
那如何判断区分这两种动作呢?
一. Javascript代码处理方法：
function window.onbeforeunload()
{
//用户点击浏览器右上角关闭按钮或是按alt+F4关闭
if(event.clientX>
{
// alert("点关闭按钮");
document.getElementById("hiddenForm:hiddenBtn").click();
// "确定要退出本页吗?";
}
//用户点击任务栏，右键关闭。
s或是按alt+F4关闭
else if(event.clientY > || event.altKey)
{
// alert("任务栏右击关闭");
document.getElementById("hiddenForm:hiddenBtn").click();
// "确定要退出本页吗?";
}
//其他情况为刷新
else
{
// alert("刷新页面");
}
}
其中event.clientX //鼠标光标X坐标
//窗体工作区宽度
event.clientY //鼠标光标Y坐标
event.altKey //是否按下alt键
二. 事件捕捉方法：
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" > </body>
<script language="JavaScript" type="text/javascript">
var DispClose = true;
function CloseEvent()
{
if (DispClose)
{
return "是否离开当前页面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在这里处理关闭页面前的动作
}
在页面卸载之前引发onbeforeunload事件，如果用户选择“是”即确定卸载页面将引发onunload事件，否则返回页面不做任何操作。