在用户点击浏览器关闭按钮时需要给出提示，确认退出时就需要监听浏览器的关闭事件了，
Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：
<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>
在用户确定关闭窗体后，页面中有一个表单需要提交，但是发现当表单提交时又会触发 window.onbeforeunload事件，也就是说当关闭窗口和提交表单时会弹出两次相同的提示信息，所以代码调整如下：
JavaScript代码：
<script type="text/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(){};
}
function onunload_handler(){
UnloadConfirm.clear();
document.forms[0].submit();
}
function closeWin(){
window.close();
}
function initPage(){
UnloadConfirm.set(MSG_UNLOAD);
}
initPage();
window.onunload = onunload_handler;
// -->
</script>
HTML代码：
<input type="button" value="提交" onclick="closeWin()"/>
<form action="#"></form>
分享到：
相关推荐
js实现监听浏览器关闭和刷新事件支持三大浏览器，点击直接看效果
JS 监听 关闭浏览器事件
flex监听浏览器关闭事件，完成对于浏览器关闭事件的监听。以及弹出相应的关闭提示
主要介绍了JS针对浏览器窗口关闭事件的监听方法,总结整理了几种常用的浏览器关闭事件监听方法,非常简单实用,需要的朋友可以参考下
浏览器是客户端，客户端的操作服务器是监听不到的，所以可以用js来监听，js代码监听浏览器关闭或者刷新
在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页，非常实用，感兴趣的童鞋参考下吧
当浏览器退出时会触发onunload事件，因此我们可以使用onunload事件做一些在页面关闭时要执行的操作，如提示用户信息等。但或许在实际应用中我们都发现一个问题，刷新浏览器同样会触发onunload事件，也就是只要是离开...
本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现，分享给大家，具体如下： 效果如下图 正常 js 页面处理方式 [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if ...
1、使用[removed]之类的API [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的...2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
下面小编就为大家带来一篇iOS微信浏览器回退不刷新实例(监听浏览器回退事件)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接：https://primarykeylw.iteye.com/blog/1568120
主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题描述1： 微信开发的时候，在公众号菜单中打开一个H5页面(如：个人中心)，在这个页面上的一些操作，经过多次跳转后，点击左上角的返回按钮，发现会原封不动的返回至上一级页面。 ... 解决方式： ...
主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
js监控IE火狐浏览器关闭、刷新、回退、前进事件.docx
主要介绍了关闭浏览器时提示onbeforeunload事件，有需要的朋友可以参考一下