js - 页面刷新或关闭时发送ajax请求（onbeforeunload事件）

87 阅读 0 评论 58 点赞

我是靠谱客的博主轻松小丸子，最近开发中收集的这篇文章主要介绍js - 页面刷新或关闭时发送ajax请求（onbeforeunload事件），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

onbeforeunload 事件
当窗口即将被关闭时，会触发该事件。此时页面文档依然可见，且该事件的默认动作可以被取消。

事件创建

<body onbeforeunload="fun()"></body>
window.onbeforeunload=function(){fun();};
window.addEventListener("beforeunload", fun);

案例

<!DOCTYPE html>
<html>
<head>
    <title>页面刷新或关闭时发送ajax请求</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            function sendMsg() {
                $.ajax({
                    url: "test",
                    type: "GET",
                    /*这里必须是false*/
                    /*这里必须是false*/
                    /*这里必须是false*/
                    async: false,
                    data: {
                        "name": "value"
                    }
                });
            }
            /**
             * onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
             * @return 
             */
             window.onbeforeunload = function(){
                console.log("OK");
                sendMsg();
            }
        });
    </script>
</body>
</html>