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

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

事件创建

  1. window.onbeforeunload=function(){fun();};
  2. 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>

运行截图:
js - 页面刷新或关闭时发送ajax请求(onbeforeunload事件)_第1张图片
注:

从2011年5月25日起,HTML5规范声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行:window.showModalDialog(),window.alert(), window.confirm() ,window.prompt()。

你可能感兴趣的:(javascript)