在用户点击浏览器关闭按钮时需要给出提示，确认退出时就需要监听浏览器的关闭事件了，
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实现监听浏览器关闭和刷新事件支持三大浏览器，点击直接看效果
### Flex监听浏览器关闭事件 在Web开发中，有时我们需要对用户关闭浏览器窗口的行为进行监听，并在用户尝试关闭页面时给出提示或执行某些操作。本文将详细介绍如何利用Flex结合JavaScript实现这一功能。 #### 1. ...
### JS监听关闭浏览器事件 在Web开发中，有时我们需要对用户关闭浏览器窗口或标签页的行为进行监测，并在这些行为发生前执行某些操作。这通常涉及到`onbeforeunload`和`onunload`这两个事件处理程序。 #### 1. `...
下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window.onbeforeunload = onclose; function onclose() { if (event.clientX > document.body....
浏览器是客户端，客户端的操作服务器是监听不到的，所以可以用js来监听，js代码监听浏览器关闭或者刷新
监听浏览器关闭事件主要通过`onbeforeunload`事件实现。此事件在浏览器窗口即将关闭时触发。需要注意的是，不同浏览器对此事件的支持程度和行为有所不同。 ```javascript window.onbeforeunload = function() { if...
在JavaScript中，有几种方法可以用来监听浏览器关闭事件： 1. **`window.onbeforeunload`**：此事件会在浏览器窗口或标签页关闭之前被触发。 2. **`window.onunload`**：该事件在文档完全卸载之后被触发，但是它的...
总之，区分页面刷新和关闭的需求在实际开发中很常见，可以通过利用浏览器的事件机制和本地存储机制实现。通过合理的设计和代码实现，可以大大提高用户体验和系统的健壮性。同时，这也是一个很好的例子，说明了产品...
在JavaScript中，对浏览器窗口关闭事件的监听是开发者经常需要用到的功能，这可以帮助我们在用户离开页面时执行一些必要的操作，比如保存数据、清理资源或者显示确认提示。本文将深入探讨两个关键的JavaScript事件：...
为此，JavaScript 提供了 `onunload` 事件，它会在浏览器窗口被关闭或者用户离开当前页面时触发。然而，在实际的应用场景中，我们可能会遇到一个棘手的问题：不论是刷新页面还是真正关闭窗口，`onunload` 事件都会被...
js关闭浏览器窗口 js关闭浏览器窗口，不弹出提示框。支持ie6+，火狐，谷歌等浏览器。 代码如下: <html> <head /> <body> [removed] function closeWin(){ window.opener=null; window.open(”,’_...
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行，经过百度和自己的实际测试， 终于解决了这个问题，代码如下： mounted() { window.addEventListener('...
这段代码的主要作用是在用户点击浏览器的后退按钮时，通过监听`popstate`事件，使用`pushState`方法把当前页面的URL添加到历史记录中。这使得每次点击后退按钮时，浏览器都会重新导航到当前页面，从而达到阻止后退的...
在Vue.js应用中，有时我们需要监听窗口的关闭和刷新事件，以便执行某些操作，比如保存用户数据或确认离开页面。本文将详细介绍两种在Vue.js中实现这一目标的方法。 首先，我们来了解一下`window.onbeforeunload`...
在Flex4中，我们可以利用Flash Player提供的API来监听浏览器关闭事件。虽然Flex应用本身不能直接控制浏览器行为，但可以监听到浏览器即将关闭的信号，从而进行一些必要的清理工作或显示确认对话框，询问用户是否真的...
为此，我们可以借助JavaScript的history对象来监听浏览器的回退事件，并相应地强制刷新页面或者执行其他自定义逻辑。 在这篇文章中，我们看到了如何使用pushState方法来监听浏览器的回退事件。pushState是HTML5提供...
本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现，分享给大家，具体如下： 效果如下图 正常 js 页面处理方式 [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if ...
问题描述1： 微信开发的时候，在公众号菜单中打开一个H5页面(如：个人中心)，在这个页面上的一些操作，经过多次跳转后，点击左上角的返回按钮，发现会原封不动的返回至上一级页面。 ... 解决方式： ...