js_页面关闭beforeunload事件

Posted 皮皮是只公喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js_页面关闭beforeunload事件相关的知识,希望对你有一定的参考价值。

做圆桌爆文公众号的时候,需要对阅读的文章进行时间统计。是这个公众号的核心功能,客户把文章转发到朋友圈或者转给朋友,记录谁阅读此文章和阅读时长进行记录,从而展示给客户。

功能点是,关闭页面时触发事件,请求后台,把阅读时间记录下来。

技术段:

 1 //原生写法
 2 window.onbeforeunload = function(event) {
 3     return confirm("确定退出吗");
 4 }
 5 
 6 //JQ    写法
 7 $(window).bind(‘beforeunload‘, function() {
 8     return ‘您输入的内容尚未保存,确定离开此页面吗?‘;
 9 });
10 //这里暂停
11 $(window).unbind(‘beforeunload‘);

全部代码:

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
 8     </head>
 9 
10     <body>
11     </body>
12     <script type="text/javascript">
13         //原生写法
14         window.onbeforeunload = function(event) {
15             return confirm("确定退出吗");
16         }
17 
18         //JQ    写法
19         $(window).bind(‘beforeunload‘, function() {
20             return ‘您输入的内容尚未保存,确定离开此页面吗?‘;
21         });
22         //这里暂停
23         $(window).unbind(‘beforeunload‘);
24     </script>
25 
26 </html>
View Code

 

以上是关于js_页面关闭beforeunload事件的主要内容,如果未能解决你的问题,请参考以下文章

仅在页面关闭时触发事件[重复]

在 beforeunload 事件处理程序中停止页面卸载

页面的beforeunload和unload的事件应用

如何在 React 中使用窗口的 beforeunload 事件执行 axios 代码

js如何监听窗口的关闭?

如何使用 React js 检测浏览器标签关闭事件?