当我们需要通过 JavaScript 在网页中发送异步请求时，常常会使用 XMLHttpRequest 对象。然而，在某些情况下，如用户关闭网页或导航到不同的 URL 时，浏览器可能会取消这些请求。为了避免此类问题，我们可以利用 window.onbeforeunload 事件来在浏览器卸载页面之前发出请求并等待其完成。
window.onbeforeunload事件简介
window.onbeforeunload是一个事件处理程序，当用户将要离开当前页面时被触发。它允许我们在浏览器卸载页面之前执行一些代码，例如询问用户是否真的要离开页面或保存未完成的表单数据。
--------------------- - --------------- - -- ---- -- ------- ------ --------- --- ---- --
注意，由于安全原因，浏览器不允许我们在该事件处理程序中直接阻止页面卸载。相反，我们需要在返回值中设置一条消息。如果用户选择留在页面，则该消息将显示在确认对话框中。
--------------------- - --------------- - ----------------------- ----------------- - ------------ --
发送 Ajax 请求
要在 window.onbeforeunload 事件中发出 Ajax 请求，我们可以使用以下方法：
- 创建 XMLHttpRequest 对象
- 发送请求
- 阻止页面卸载事件
- 等待请求完成
--------------------- - --------------- -
-----------------------
--- --- - --- -----------------
--------------- -------------------- -------
-----------
-- ---- --- --- -------- -- -------- ------ ----------
----- --------------- --- -------------------- -
-- -- ------- - ---- ----
-
--注意，在步骤3中，我们需要调用 event.preventDefault() 来阻止页面卸载事件。这样可以确保在请求完成之前用户不会离开当前页面。
此外，在一些浏览器中，我们还需要在 open 方法中设置第三个参数为 false。这样可以确保使用同步请求而不是异步请求。
Chrome 中的问题
然而，如果您在 Chrome 中测试上述代码，您会发现它并不能正常工作。事实上，Chrome 在 window.onbeforeunload 事件中发送的所有 Ajax 请求都将被取消。
这是因为 Chrome 将 window.onbeforeunload 事件限制为仅执行同步操作。因此，当我们尝试发送一个异步请求时，它将被取消。
解决方案
要在 Chrome 中发送 window.onbeforeunload 事件中的 Ajax 请求，我们可以使用以下解决方案：
- 创建一个隐藏的 iframe 元素
- 设置其 src 属性以发送请求
- 阻止页面卸载事件
- 监听 iframe 的 load 事件以检测请求是否完成
--------------------- - --------------- -
-----------------------
--- ------ - ---------------------------------
-------------------- - -------
----------------------------------
------------- - ---------- -
-- ------- --- --------- - -- --------- ----
--
---------- - --------------------
--通过创建一个隐藏的 iframe 元素并设置其 src 属性，我们可以发送一个异步请求。然后，我们等待 iframe 的 load 事件以检测请求是否完成。
请注意，由于这是一个异步请求，因此请确保在 load 事件处理程序中执行任何必要的代码。
总结
在本文中，我们讨论了如何使用 window.onbeforeunload 事件来在浏览器卸载页面之前发出 Ajax 请求。我们了解到，在 Chrome 中，我们需要使用一个隐藏的 iframe 元素来发送异步请求。这种技术对于需要在用户关闭页面之前执行某些操作的 Web 应用程序非
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27217