监听浏览器关闭事件，并且兼容ie,ff,chrome

刚刚换了工作小组，小组哥们说有个烦人的功能，就是执行过程必须在浏览器这边进行，但是用户可能在执行过程中按F5或者关闭了浏览器，导致执行失败！说到这个，我想起了在csdn的时候关闭浏览器有弹出询问框的功能，于是百度和google监听浏览器关闭监听的方法，废话不多说，直接上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>阻止关闭和刷新</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("beforeunload", listenClose, false);function unListen() {window.removeEventListener('beforeunload',listenClose, false);
}function listenClose(e) {var confirmationMessage = '业务未执行完成，离开本页面会导致执行失败，是否现在离开？';(e || window.event).returnValue = confirmationMessage;     return confirmationMessage;                                }</script> <button id="" οnclick="unListen()">解除关闭监听</button>
</body>
</html>

原理很简单，就是初始化页面的时候增加一个关闭和刷新的监听弹窗，关闭或者刷新时浏览器会执行 beforeunload 事件，具体原理百度很多，也可以参考这里，这里做下记录，以便以后使用。

监听浏览器关闭事件，并且兼容ie,ff,chrome相关推荐

js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
javaScript如何监听浏览器关闭事件
转载链接:http://www.cnblogs.com/Tim_Liu/archive/2010/11/09/1872596.html 最近写东西的时候发现需要对浏览器的关闭进行监听, 当用户关闭的时 ...
【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
h5页点击返回时关闭_H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件...
在H5页面中一些场景情况下防止表单数据丢失或者防止用户意外跳走页面,通过js进行监听提示用户,通过onbeforeunload事件和onunload事件实现. onbeforeunload和onunl ...
window.open 打开vue路由，并监听页面关闭事件，监听子父页面消息传递
name:路由 query:传递参数 const page2 = this.$router.resolve({name:'addHs',query:{hsCode:row.hsCode}}); var ...
前端实现带二维码的工厂物料标签，发票生成以及打印（vue框架），以及监听浏览器打印事件的钩子函数
首先用一个变量来存放后台传过来的票据的数据,我们就用allPrintData来存放,然后在模板中,创建一个新的dom节点 <div id='printArea'></div> ...
js监听浏览器关闭页面事件
window.onbeforeunload = function() {//功能函数 } window.onbeforeunload = function(e) {var e = window.eve ...

监听浏览器关闭事件，并且兼容ie,ff,chrome

监听浏览器关闭事件，并且兼容ie,ff,chrome相关推荐

最新文章

热门文章