如何在window.onbeforeunload中自定义提示文案与按钮文字

首先明确：浏览器出于安全规范和用户体验统一要求，禁止自定义window.onbeforeunload默认弹窗的按钮文字与样式——不管用什么弹窗组件（包括你使用的SweetAlert），直接在beforeunload事件里替换默认提示的操作都会被浏览器拦截，最终只会显示浏览器自带的默认弹窗。

如果想要实现自定义按钮文字的提示（「不要刷新」/「仍要刷新」），可以通过接管页面卸载触发逻辑的方式实现，具体步骤和调整后的代码如下：

实现思路 #

1. 监听页面卸载触发行为（比如用户点击刷新、关闭标签页），先阻止默认的beforeunload提示。
2. 弹出自定义的SweetAlert弹窗，设置所需的按钮文字和提示内容。
3. 根据用户选择，决定是否允许页面继续卸载：
   • 用户选择「仍要刷新」：执行页面刷新/卸载操作
   • 用户选择「不要刷新」：取消卸载行为，留在当前页面

调整后的代码 #

// 全局变量标记是否允许页面卸载
let allowUnload = false;

// 监听beforeunload事件
window.addEventListener('beforeunload', function(event) {
    if (!allowUnload) {
        // 阻止默认提示弹窗
        event.preventDefault();
        // 触发自定义弹窗
        showCustomUnloadAlert(event);
        // 部分浏览器需要返回空值才能触发拦截逻辑
        event.returnValue = '';
    }
});

function showCustomUnloadAlert(event) {
    Swal.fire({
        title: '确认刷新？',
        html: '你即将刷新页面，未保存的内容可能会丢失',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '仍要刷新',
        cancelButtonText: '不要刷新',
        // 禁止点击弹窗外部或按ESC关闭，避免流程混乱
        allowOutsideClick: false,
        allowEscapeKey: false
    }).then((result) => {
        if (result.isConfirmed) {
            // 用户确认刷新，允许页面卸载
            allowUnload = true;
            // 执行页面刷新
            window.location.reload();
        } else {
            // 用户取消，取消卸载行为
            allowUnload = false;
            // 清除事件返回值，避免残留提示
            delete event.returnValue;
        }
    });
}

注意事项 #

• 这种方式能实现自定义提示，但无法拦截所有卸载场景（比如用户直接关闭整个浏览器窗口），这是浏览器的安全限制导致的。
• 部分浏览器可能对这类拦截逻辑有严格限制，需要测试不同浏览器的兼容性。
• 不要设置过长的弹窗定时器，避免影响用户体验。

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