window.onbeforeunload 在 Chrome 中的 Ajax 请求

当我们需要通过 JavaScript 在网页中发送异步请求时，常常会使用 XMLHttpRequest 对象。然而，在某些情况下，如用户关闭网页或导航到不同的 URL 时，浏览器可能会取消这些请求。为了避免此类问题，我们可以利用 window.onbeforeunload 事件来在浏览器卸载页面之前发出请求并等待其完成。

window.onbeforeunload事件简介

window.onbeforeunload是一个事件处理程序，当用户将要离开当前页面时被触发。它允许我们在浏览器卸载页面之前执行一些代码，例如询问用户是否真的要离开页面或保存未完成的表单数据。

window.onbeforeunload = function(event) {
  // code to execute before unloading the page
};

注意，由于安全原因，浏览器不允许我们在该事件处理程序中直接阻止页面卸载。相反，我们需要在返回值中设置一条消息。如果用户选择留在页面，则该消息将显示在确认对话框中。

window.onbeforeunload = function(event) {
  event.preventDefault();
  event.returnValue = '确定离开此页面吗？';
};

发送 Ajax 请求

要在 window.onbeforeunload 事件中发出 Ajax 请求，我们可以使用以下方法：

1. 创建 XMLHttpRequest 对象
2. 发送请求
3. 阻止页面卸载事件
4. 等待请求完成

-- -------------------- ---- -------
--------------------- - --------------- -
  -----------------------
  
  --- --- - --- -----------------
  --------------- -------------------- -------
  -----------
  
  -- ---- --- --- -------- -- -------- ------ ----------
  ----- --------------- --- -------------------- -
    -- -- ------- - ---- ----
  -
--

注意，在步骤3中，我们需要调用 event.preventDefault() 来阻止页面卸载事件。这样可以确保在请求完成之前用户不会离开当前页面。

此外，在一些浏览器中，我们还需要在 open 方法中设置第三个参数为 false。这样可以确保使用同步请求而不是异步请求。

Chrome 中的问题

然而，如果您在 Chrome 中测试上述代码，您会发现它并不能正常工作。事实上，Chrome 在 window.onbeforeunload 事件中发送的所有 Ajax 请求都将被取消。

这是因为 Chrome 将 window.onbeforeunload 事件限制为仅执行同步操作。因此，当我们尝试发送一个异步请求时，它将被取消。

解决方案

要在 Chrome 中发送 window.onbeforeunload 事件中的 Ajax 请求，我们可以使用以下解决方案：

1. 创建一个隐藏的 iframe 元素
2. 设置其 src 属性以发送请求
3. 阻止页面卸载事件
4. 监听 iframe 的 load 事件以检测请求是否完成

-- -------------------- ---- -------
--------------------- - --------------- -
  -----------------------

  --- ------ - ---------------------------------
  -------------------- - -------
  ----------------------------------

  ------------- - ---------- -
    -- ------- --- --------- - -- --------- ----
  --

  ---------- - --------------------
--

通过创建一个隐藏的 iframe 元素并设置其 src 属性，我们可以发送一个异步请求。然后，我们等待 iframe 的 load 事件以检测请求是否完成。

请注意，由于这是一个异步请求，因此请确保在 load 事件处理程序中执行任何必要的代码。

总结

在本文中，我们讨论了如何使用 window.onbeforeunload 事件来在浏览器卸载页面之前发出 Ajax 请求。我们了解到，在 Chrome 中，我们需要使用一个隐藏的 iframe 元素来发送异步请求。这种技术对于需要在用户关闭页面之前执行某些操作的 Web 应用程序非

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27217