关闭页面如何向后台发送消息？解锁告别页面神秘通道

2023-10-24 09:37:01

页面关闭消息发送之旅：揭秘 navigator.sendBeacon()

踏上神秘之旅

在网页浏览的数字领域，页面关闭时向后台发送消息就像一场神秘的通讯之旅。让我们揭开这个隐藏在浏览器背后的秘密通道，了解它的运作原理和用途。

页面关闭的秘密通道：navigator.sendBeacon()

想象一下，你正全神贯注地浏览一个网站，突然一个紧急事务需要你立即处理。你点击了关闭按钮，页面瞬间消失。你知道吗？就在那一刻，你的浏览器正在悄悄地向网站的服务器发送一条消息，告诉服务器你已经关闭了页面。

这个消息可不是凭空消失的，它需要一个专门的通道，而这个通道就是 navigator.sendBeacon() 方法。

揭秘 navigator.sendBeacon()：网页的隐形信使

navigator.sendBeacon() 方法就像是一个隐藏在浏览器中的隐形信使，它可以在页面关闭时向后台发送消息。它非常适用于那些需要在页面关闭前向服务器传输数据的场景，比如：

使用 navigator.sendBeacon() 发送消息

使用 navigator.sendBeacon() 方法发送消息非常简单，只需几行代码即可：

navigator.sendBeacon('https://example.com/send-message', '{"message": "Hello, world!"}');

上面的代码会向 https://example.com/send-message 发送一条消息，消息内容是 {"message": "Hello, world!"}。

需要注意的是：

navigator.sendBeacon() 方法只在页面关闭时发送消息，如果你想在页面其他时候发送消息，可以使用 XMLHttpRequest 或 fetch() 方法。

navigator.sendBeacon() 的优势

使用 navigator.sendBeacon() 方法发送消息有很多优势：

navigator.sendBeacon() 的不足之处

navigator.sendBeacon() 方法也有以下一些不足之处：

常见问题解答

问：navigator.sendBeacon() 方法和 XMLHttpRequest 有什么区别？
- 答： XMLHttpRequest 是一个更通用的方法，可以用于在页面任何时间向服务器发送请求。然而，navigator.sendBeacon() 方法只在页面关闭时发送消息，速度更快，更可靠。
问：为什么 navigator.sendBeacon() 方法只能发送字符串数据？
- 答： navigator.sendBeacon() 方法使用的是 HTTP POST 请求，而 HTTP POST 请求只能发送字符串数据。
问：如何使用 navigator.sendBeacon() 方法发送跨域请求？
- 答： navigator.sendBeacon() 方法不支持跨域请求。
问：navigator.sendBeacon() 方法会阻塞页面关闭吗？
- 答：不会，navigator.sendBeacon() 方法不会阻塞页面关闭。
问：什么时候使用 navigator.sendBeacon() 方法最合适？
- 答： navigator.sendBeacon() 方法最适合在页面关闭前需要向服务器发送少量数据的场景。