自定义浏览器关闭前的弹窗提示方案咨询

结论：无法替换浏览器默认的beforeunload弹窗，这是浏览器的安全限制——防止恶意网站通过自定义弹窗强制留住用户，干扰正常的页面关闭/刷新操作。

所有主流浏览器（Chrome、Firefox、Edge等）都严格管控beforeunload事件的自定义内容：你只能通过设置event.returnValue或返回非空字符串触发默认弹窗，但弹窗的文字、样式完全由浏览器控制，无法改成自定义的Modal或Toaster。

你当前的代码：

window.addEventListener("beforeunload", function (event) {
    event.returnValue = "\o/"
})

这段代码确实能触发默认弹窗，但不管你给event.returnValue设置什么内容，浏览器大多只会显示预设提示（比如“你可能有未保存的更改”），不会展示你自定义的字符串。

替代方案 #

如果想展示自定义提示，只能提前拦截页面内的操作，而非等到beforeunload阶段：

• 监听页面内的链接点击、表单提交等主动跳转事件，在这些事件触发时弹出自定义Modal/Toaster询问用户，确认后再允许操作。
• 示例代码（拦截链接点击）：

// 监听所有页面内的链接点击
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
        // 模拟判断用户有未保存内容
        const hasUnsavedChanges = true;
        if (hasUnsavedChanges) {
            e.preventDefault();
            // 调用你的自定义提示组件，这里用原生confirm示例
            if (confirm('你有未保存的内容，确定要离开吗？')) {
                window.location.href = this.href;
            }
        }
    });
});

• 对于浏览器标签关闭、刷新这类操作，还是只能依赖默认弹窗，但可以在用户编辑内容时提前给出提示（比如显示“未保存”的Toaster），让用户有心理预期。

内容的提问来源于stack exchange，提问作者Amir