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

最新推荐文章于 2024-07-31 19:21:59 发布

KT99

最新推荐文章于 2024-07-31 19:21:59 发布

阅读量3.5k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41456723/article/details/106615017

版权

当页面即将关闭或刷新时，JavaScript的onbeforeunload事件可用于执行操作，如发送ajax请求。由于HTML5规范，该事件处理函数内不再允许弹窗相关的方法。此功能适用于在用户离开页面前保存数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>