JQuery获取页面关闭事件

　　最近项目提了一个新需求，就是在浏览本项目页面的时候，检测当用户关闭当前页面或者所在的浏览器时，会触发一个函数，在上网搜了很多文章，都说使用onbeforeunload，和onbunload函数，我身边的大神也说没问题，但是我写上去了然后关闭页面也不弹出alert也不触发浏览器默认弹框，很郁闷，后来在一位大神的提醒下，才发现问题，但还有个问题想不明白；

　　先看写的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>关闭页面弹出</title>
 6     </head>
 7     <body>
 8         <button id="btn">点击</button>
 9         <a href="http://www.runoob.com">点击调整到菜鸟教程</a>
10     </body>
11     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
12     <script type="text/javascript">
13         var btn = document.getElementById('btn');
14         btn.addEventListener('click', function(e){
15             alert('1次')
16         });
17          btn.addEventListener('click', function(e){
18             alert('2次')
19         });
20         window.addEventListener("beforeunload", function(event) {
21             event.returnValue = "我在这写点东西...";
22         });
23     </script>
24 </html>
View Code

　　在这里面还有别的写法，可以参考菜鸟教程onbeforeunload事件还有为什么用了onbeforeunload也没用？，这些问题，经过点击可以使用了。

 

　　首先因为浏览器兼容问题，如下：

IE、Safari 完美支持

Firefox、Chrome 不支持文字提醒信息

Opera 不支持

 接下来说一些注意事项。

1、如果想在onbeforeunload中ajax提交数据，试试用同步ajax请求。因为有些浏览器实现会在unload时在异步ajax结果返回前停掉线程，这样你的回调就永远调不到；
2、火狐浏览器和谷歌不支持问题弹出框，所以在调用的时候alert是不起作用的；
3、在浏览器中调用其它的一些操作也是不会实现的，比如你关闭页面的同时，重新打开一个新页面，等等；

，然后接下来说一下我的疑惑，，谷歌方面也是可以提示浏览器默认弹出框的

比如，但是这是在你打开页面进行点击按钮或者打开一个连接，进行操作之后，才会触发，如果只是打开页面，没有进行任何操作的话，谷歌和360浏览器是不会有这个弹出框的（不过里面写的ajax还是会触发），这就让我不理解了，有什么想法，希望各位大神不吝赐教！

 

posted on 2018-11-14 15:24  逍遥学徒  阅读(8641)  评论(0)  编辑  收藏  举报

导航