Javascript前台捕获浏览器关闭事件,后台处理一些善后工作

Javascript前台捕获浏览器关闭事件，后台处理一些善后工作

1.使用onbeforeunload 事件捕获浏览器关闭事件

IE和火狐都支持onbeforeunload事件，但是opera不支持。

注意：不仅关闭浏览器时会触发onbeforeunload事件，刷新等事件也会触发onbeforeunload事件。

2.事件注册方法

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，处理请求的函数名为：UpdateLoginState

Bug：上述解决方案可以很好的解决用户通过点击浏览器右上角的关闭按钮，和使用快捷键Alt+F4关闭浏览器的情况，但不能解决用户在多窗口模式下，进关闭当前浏览的页面情况，如下所示：

QQ：604671517

希望知道如何解决上述问题的大虾们不吝赐教！