如何创建当用户离开选项卡或页面时显示的通知？

Question

我希望创建一个功能来提醒用户留在网页上。因此，当他们单击另一个浏览器选项卡时（或者更好的是，当他们离开浏览器时），我希望能够通知他们不要离开。

有人有什么想法吗？我这个网页使用的是Vue、JS、Shadcn！万分感谢！

我想一个简单的方法是使用alert()，但我注意到它只在他们离开的页面中起作用，并且他们只有在返回页面后才会看到通知，这是违反直觉的。当他们即将离开网页时提醒他们很重要。

Answer 1

基本上，不，至少我不知道。您无法直接提醒用户留在网页上，因为浏览器有防止侵入性操作的限制。但是，您可以使用

visibilitychange

事件来检测某人何时切换选项卡并显示温和的提醒，但这不是您真正想要的。

如果用户尝试通过链接或后退按钮导航离开，您也可以使用确认对话框，但这不会捕获选项卡切换。