web项目实现用户退出网页前向后端发送请求

原创已于 2024-02-05 10:01:57 修改 · 774 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #jquery #html #html5

于 2024-02-05 10:01:12 首次发布

javascript 专栏收录该内容

2 篇文章

订阅专栏

文章讨论了解决用户在编辑页面内容时，如何在页面关闭或浏览器退出时自动发送请求释放编辑权限的问题，利用window.navigator.sendBeacon方法发送非阻塞的HTTP请求，避免手动操作的错误和权限占用。

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

问题描述：

在工作中有遇到这样一个需求，用户进入一个页面，要编辑页面内容前先点击“编辑”按钮，锁定编辑权限（则当前其他人不可编辑），编辑完后要释放权限得点下“结束编辑”释放权限。那么问题来了，且不说每次关闭页面前都要点“结束编辑”按钮比较麻烦，要是用户不小心退出了页面，那编辑权限就一直被占用。

解决思路：

既然手动容易出错，那就再加个自动结束编辑的功能。在退出网页前（关闭浏览器、关闭/刷新页面）自动向后端发送一个结束编辑的请求。

解决方法：

在网页的卸载事件 unload 中用 window.navigator.sendBeacon(url,data) 向后端发送请求：

注意：因为浏览器通常会忽略在 unload 事件监听器中的 XMLHttpRequest 请求。谷歌浏览器也已经不允许页面关闭期间进行同步的 XMLHTTPRequest()，所以这里可以用window.navigator.sendBeacon(url,data)来发送请求，它是一个 Web API 方法，用于向服务器发送非阻塞性的 HTTP 请求。

这个方法常用于在用户关闭页面或浏览器之前，发送一些需要保存的数据。这个方法返回一个布尔值，表示请求是否成功发送。

url：一个字符串，表示要发送请求的 URL。
data：一个 Blob 或 ArrayBuffer，表示要发送的数据。这个参数是可选的，如果省略，那么请求将不包含任何数据

  window.addEventListener("unload", (e)=>{
        let formData = new FormData()
        formData.append("status","Y")
        formData.append("third_uid",getCookie("thirdUid"))
        formData.append("user_name",getCookie("userName"))
        window.navigator.sendBeacon("http://127.0.0.1:8080/lock",formData);
    });