如何用js监听浏览器页面的关闭刷新事件

首先判断浏览器的类型，简便可用navigator.userAgent()获取浏览器的字符串，与浏览器类型做查找即可。

目前对Chrome和firfox区分关闭和刷新成功。

浏览器为firfox时flag为false，Chrome为true。

window.onload(){

window.onunload = function() {

if(flag){

console.log('关闭 *** 作')

}

else {

console.log('刷新 *** 作')

}

}

window.onbeforeunload = function () {

if(!flag){

console.log('关闭 *** 作')

}

else{

console.log('刷新 *** 作')

}

}

}

javascript的onbeforeunload()和onunload()两个事件。

相同点:

两者都是在对页面的关闭或刷新事件作个 *** 作。

不同点：

unbeforeunload（）事件执行的顺序在onunload()事件之前发生。(因为，unbeforeunload()是在页面刷新之前触发的事件，而onubload()是在页面关闭之后才会触发的)。

unbeforeunload（）事件可以禁止onunload()事件的触发。

onunload()事件是无法阻止页面关闭的。

浏览器的兼容

onunload:

IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行；

IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行；

firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行，但关闭浏览器不能执行；

Safari 刷新页面、页面跳转之后会执行，但关闭浏览器不能执行；

Opera、Chrome 任何情况都不执行。

onbeforeunload:

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7会出现bug

语法

element.addEventListener(event, function, useCapture)

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

addEventListener可以对一个dom添加多个监听器，并且会顺序执行。

开发中，会遇到多个js文件都使用window.onload，然而只有最后一个绑定的生效，如下：

window.onload = func1()

window.onload = func2()

这时可以用addEventListener来解决：

window.addEventListener('load', func1)

window.addEventListener('load', func2)

---