admin 管理员组文章数量: 887142
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同，所以首先要先区分各浏览器
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isIE11 = userAgent.indexOf("rv:11.0") > -1; //判断是否是IE11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器1.chrome和FireFox
if(!isIE && !isEdge && !isIE11) {//兼容chrome和firefoxvar _beforeUnload_time = 0, _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){$.post('webLoginController.do?delSession2');//浏览器关闭}else{//浏览器刷新}}window.onbeforeunload = function (){ _beforeUnload_time = new Date().getTime();if(is_fireFox){//火狐关闭执行$.post('webLoginController.do?delSession2');//浏览器关闭} };
}2.IE9, 10,11,Edge
这四个浏览器可以用beforeUnload事件监听浏览器关闭，但是无法区分刷新和关闭。所以我是用如下方法解决的：
思路：
IE9和10
这两个浏览器在刷新时先触发beforeunload事件，再触发unload事件。而在关闭时只触发beforeunload事件。所以根据这个特点。在beforeunload时调用A方法，将"1"存入session的"flagiii"属性中，并单开一个线程延迟一段时间执行B,在unload时再调用C将"flagiii"属性的值改为0；这样，在A中延迟一段时间后判断session中的flagiii属性的值是否为1，为1的话则是关闭，调用B方法（来操作你要操作的事情(我要做的是删除库中的内容和session)）。为0是刷新，不调用B方法。
js:
if(isIE) {//兼容ie8,9,10window.onbeforeunload = function() {//alert(0);flagiii = "1";$.ajax({type: "post",url: "webLoginController.do?A",data:{"flagiii": flagiii},success: function() {},async:false});}window.onunload = onclose;function onclose(){flagiii = "0";$.ajax({type: "post",url: "webLoginController.do?storageData",data:{"flagiii": flagiii},success: function() {}});}
}java：
/*** 关闭浏览器时清除session兼容IE9和IE10浏览器* 让方法延迟10s执行* create by lucy* 2017-12-19*/@RequestMapping(params = "A")public void A(@RequestParam("flagiii") String flagiii, final HttpSession session, final HttpServletRequest req) {session.setAttribute("flagiii", flagiii);Thread thread = new Thread(new Runnable(){@Overridepublic void run() {System.out.println("begin");try {Thread.sleep(10000);} catch (InterruptedException e) {e.printStackTrace();}System.out.println("end");delData(session, req);} });thread.start(); }public void B(HttpSession session,HttpServletRequest req) {String flagiii = (String) session.getAttribute("flagiii");if("1".equals(flagiii)) {boolean isTrue = false;String userId = session.getAttribute("userId").toString();isTrue = webLoginService.deleteOnline(userId);//将安全日志插入数据库 mapSafeLogInsertDBUtils.safeLogInsertDB(req, session, "关闭浏览器", true,StringUtil.LOGINOUT);}}/*** 存储标记(配合delSessionData方法)* @param flagiii* create by lucy* 2017-12-19*/@RequestMapping(params = "B")public void B(HttpSession session,@RequestParam("flagiii") String flagiii) {session.setAttribute("flagiii", flagiii); }IE11和Edge
思路类似于9和10，IE11和Edge浏览器在关闭时先触发beforeunload,然后再触发unload事件。而刷新时先触发beforeunload事件，再触发unload事件，再触发load事件。所以先在页面load后将"0"存入session，在beforeunload中存入"1"在unload事件中调用方法，开启一个新线程，延迟10s执行你想做的事。
js:
var flagiii = "0";
function onloadFun() {$.ajax({type: "post",url: "webLoginController.do?storageData",data:{"flagiii": flagiii},success: function() {}});
}if(isIE || isIE11 || isEdge) {//页面加载进来后将flagii存入session onloadFun();
} if(isIE11 || isEdge) {//兼容ie11 edgewindow.onbeforeunload = function() {flagiii = "1";$.ajax({type: "post",url: "webLoginController.do?storageData",data:{"flagiii": flagiii},success: function() {},async:false});}window.onunload = onclose;function onclose(){$.ajax({type: "post",url: "webLoginController.do?delSessionData",data: {"rnd": Math.random()},success: function() {}});}
}java:
/*** 存储标记(配合delSessionData方法)* @param flagiii* create by lucy* 2017-12-19*/@RequestMapping(params = "storageData")@ResponseBodypublic void storageData(HttpSession session,@RequestParam("flagiii") String flagiii) {session.setAttribute("flagiii", flagiii);}/*** 关闭浏览器时清除session兼容IE11和Edge浏览器* 让方法延迟30s执行* create by lucy* 2017-12-19*/@RequestMapping(params = "delSessionData")@ResponseBodypublic void delSessionData(final HttpSession session, final HttpServletRequest req) { Thread thread = new Thread(new Runnable(){@Overridepublic void run() {System.out.println("begin");try {Thread.sleep(10000);} catch (InterruptedException e) {e.printStackTrace();}System.out.println("end");delData(session, req);} });thread.start(); }注意： 在beforeunload事件中的ajax请求使用同步(async: false)，否则无法发送。
本文标签： js监听浏览器关闭事件(区分刷新和关闭 兼容IE9 10 11 Edge，Chrome和Firefox)
版权声明：本文标题：js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688097567h178949.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论