关于javascript:你知道关闭页面时怎么向后台发送消息吗

需要

这两天碰到一个需要：在用户刷新页面或者敞开页面的时候，前端要给后盾发一条申请，开释该页面的受权占用。

剖析了一下，这不就是在页面卸载时发申请嘛，三下五除二就实现一版：

window.addEventListener("beforeunload", () => {let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "编程三昧"}));

测试发现：

• 刷新页面时根本满足需要（偶然也会有后盾接管不到申请的景象，但概率很低）
• 敞开页面时，后盾接管不到申请

既然异步 Ajax 不行，那就试试同步的吧，后果间接报错了：

搜了一下，解释如下：

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

概括起来就是：对当初的 Chrome 来说，在页面导航来到或者被用户敞开时，不容许发送同步 XHR 申请，波及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。

尽管问题没解决，然而却长常识了，这波不太亏！

navigator.sendBeacon()

起初通过搜寻，看到有一个接口是专门来干这事的，那就是 navigator.sendBeacon()。

形容

这个办法次要用于满足统计和诊断代码的须要，这些代码通常尝试在卸载（unload）文档之前向 web 服务器发送数据。

语法

navigator.sendBeacon(url, data);

参数

• url 表明 data 将要被发送到的网络地址。
• data 参数是将要发送的 ArrayBufferView 或 Blob、DOMString 或者 FormData 类型的数据。

返回值

当用户代理胜利把数据退出传输队列时，sendBeacon() 办法将会返回 true，否则返回 false。

实现

既然有了接口，那实现起来就简略了。

代码

 window.addEventListener("beforeunload", (e) => {const data = {name: "编程三昧"};
    window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});

成果

不论是刷新页面还是敞开页面，后盾都能接管到前端发送过去的申请，完满实现需求。

总结

浏览器当初性能越来越弱小，反对的 API 也越来越丰盛，放在之前很难实现的性能，当初可能就是轻而易举的事，还是要多关注技术动静。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

你来，怀揣冀望，我有墨香相迎！你归，无论得失，唯以余韵相赠！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！