系统描述:用户与管理员客服聊天,当用户在五分钟之内不说话,则客服会在5分钟后断开。当直接关闭浏览器页面时,后台管理员就无法检测到这种状态,此用户无法从管理员的服务列表里面清除

onunload和onbeforeunload这两个事件可以在浏览器关闭或者刷新时调用

可以在<script>脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。

onbeforeunload (页面跳转时触发的事件。)是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload(浏览器卸载页面后执行的事件)则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。

使用方法

// 监测关闭浏览器
var _beforeUnload_time = 0
var _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1; //是否是火狐浏览器
window.onunload = function() {
_gap_time = new Date().getTime() - _beforeUnload_time;
if (_gap_time <= 5) { //浏览器关闭
vm.closeService( true );//Ajax异步操作需要屏蔽掉(asyn设为false),需要时间来发送报文或者其他操作
} else {
//浏览器刷新
}
}
window.onbeforeunload = function() {
_beforeUnload_time = new Date().getTime();
if (is_fireFox) {
}
//火狐关闭执行
};

浏览器关闭,onunload和onbeforeunload的使用的更多相关文章

  1. 浏览器关闭或刷新事件--window.onbeforeunload

    window.onunload=function(){ //不可以阻止浏览器的刷新或者关闭 return false; } window.onbeforeunload=function(){ //可以 ...

  2. JS事件 卸载事件 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。注意:不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  3. 刷新或关闭时调用onbeforeunload

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  4. FLEX监视浏览器关闭事件

    在最近开发的一个FLEX项目中对于浏览器关闭时,需要做一些清理工作,该清理工作在正常情况下保证能运行就行了,要求不是太高. 因此在网上找了一些方法,经过实际测试确实可行,记录下来备查. 该方法可以完全 ...

  5. js判断获取浏览器关闭状态

    如题,js获取浏览器关闭状态,可实现判断选择是否关闭. <html> <head> <title> </title> </head> < ...

  6. JS之onunload、onbeforeunload事件详解

    简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用.区别在于onbeforeunload在o ...

  7. 160503、onunload、onbeforeunload事件详解

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  8. onunload、onbeforeunload事件详解--zhuan

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  9. Flex 监听浏览器关闭

    在creationComplete的事件中,添加如下: if(ExternalInterface.available)//外部接口是否可用    {     var js:String= " ...

随机推荐

  1. ORA-12557协议适配器不可加载

    背景:以前电脑没有装ORACLE,仅是安装了简易客户端,此次想安装一个11g数据库,安装完成后用PLSQL登录,发现报错. 解决方案A:使用免安装的oracle客户端(instantclient_11 ...

  2. Navicat Premium 简体中文版 12.0.16 以上版本国外官网下载地址(非国内)

    国内Navicat网址是:http://www.navicat.com.cn 国外Navicat网址是:http://www.navicat.com 国外的更新比国内的快,而且同一个版本,国内和国外下 ...

  3. WebStorm过期解决方法

    第一步:先删除C:\Users\本机用户名\.WebStorm2016.3\config文件中eval文件. 第二步:打开webstrom 如图,填写许可证激活码:http://idea.imsxm. ...

  4. java微信公众号支付示例

    开始之前,先准备好:appid.商家号.商户密匙. 工具类: MD5Util.java package com.yiexpress.core.utils.wechat; import java.sec ...

  5. Linux 链路聚合

    Linux 链路聚合 链路聚合与双网卡绑定几乎相同,可以实现多网卡绑定主从荣誉,负载均衡,提高网络访问流量.但链路聚合与双网卡绑定技术(bond)不同点就在于,双网卡绑定只能使用两个网卡绑定,而链路聚 ...

  6. Java第一、二次实训作业

    1.有1.2.3.4共4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去掉不满足条件的排列. 代码 pack ...

  7. Java实训作业1

    1.编写程序:声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果 2.编写程序:从键盘输入圆的半径,计算圆的面积并输出. 3.编写程序:实现一个数字加密器.运行时输入加密 ...

  8. Bytom BIP-32协议和BIP-44协议

    我们知道HD(分层确定性)钱包,基于 BIP-32:多币种和多帐户钱包,基于 BIP-44:最近比原社区的钱包开发者对比原的BIP-32和BIP-44协议有疑问,所以我今天就专门整理了一下该协议的内容 ...

  9. springAOP实现操作日志记录,并记录请求参数与编辑前后字段的具体改变

    本文为博主原创,未经允许不得转载: 在项目开发已经完成多半的情况下,需要开发进行操作日志功能的开发,由于操作的重要性,需要记录下操作前的参数和请求时的参数, 在网上找了很多,没找到可行的方法.由于操作 ...

  10. vue-cli 使用 webpack-bundle-analyzer

    # build for production and view the bundle analyzer report npm run build --report ​