在 web 应用程序中，有时需要在用户离开页面之前提示他们保存未保存的更改或其他必要的操作。为此，在浏览器中使用 onbeforeunload 事件可以实现这一目的。当用户试图关闭页面或导航到另一个页面时，通常会弹出对话框以提醒他们。
然而，问题是如何检测用户是否单击了对话框中的“取消”按钮，而不是“确定”按钮？事实上，这可能是一个棘手的问题，因为大多数浏览器不会向 JavaScript 允许直接访问对话框的结果。
但是，我们可以使用以下技巧来尝试解决这个问题：
使用 session storage
一种可行的解决方案是在对话框弹出之前将一个标志设置为 true，并在取消按钮上将其设置为 false。这可以通过在 onbeforeunload 中设置 sessionStorage 变量来完成，例如：
--------------------------------------- -------- ------- -
-------------------------------- --------
------------------- -- -
-------------------------------- ---------
-- ------ -- -- - ------------
---然后，在需要检查用户是否单击了“取消”按钮的任何地方（例如，“保存”按钮），我们可以检查 sessionStorage 变量的值以确定用户是否单击了取消：
-- --------------------------------- --- -------- - -- --------- - ---- - -- ----------------- -
使用 Promise
另一种解决方案是使用 Promise，并在点击取消按钮时将其 reject。这可以通过以下代码实现：
-------- ------------------------ -
------ --- ------------------------- ------- -
--------------------------------------- -------- ------- -
-----------------------
---------- -- ----------------- - -------
---
------------------- -- -
--------- -- ----------------- - ------
-- ------ -- -- - ------------
---
-
-- ----
------------------------
---------------- -
-- ---------
--
----------------- -
-- ---------
---在上面的示例中，我们创建了一个 showConfirmationDialog 函数，该函数返回一个 Promise。在 beforeunload 事件处理程序中，我们防止默认操作并调用 resolve 函数，以指示用户单击了“确定”按钮。同时，我们还设置了一个定时器，在一段时间后（例如1秒钟）触发 reject 函数，以指示用户单击了“取消”按钮。
然后，我们可以使用 then 和 catch 方法来处理 Promise 的解析和拒绝。
结论
虽然不能保证这些解决方案对所有浏览器都有效，并且可能存在一些潜在的错误情况，但它们可以提供基本的功能。不同的应用程序和场景可能需要不同的解决方案。开发人员应该根据实际需求选择最适合他们的方法。
示例代码链接：https://codepen.io/chatgpt/pen/KKraWrz
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31200