如何实现页面离开前自定义确认弹窗？beforeunload使用疑问

1. 关于beforeunload弹窗的自定义消息 #

首先明确：现代主流浏览器（Chrome、Firefox、Edge等）已经不再支持自定义beforeunload的弹窗消息了。不管你在事件处理函数里返回什么字符串，浏览器都会显示它自己预设的提示文本（比如Chrome会显示“此页面正在询问您是否要离开 - 您输入的数据可能不会被保存”）。

你代码里的return msg在早期Webkit内核浏览器（比如旧版Safari）可能有效，但现在所有现代浏览器都统一了这个行为——目的是防止网站滥用这个特性骚扰用户。所以想要在beforeunload的系统弹窗里显示自定义文字，目前是做不到的。

2. 实现“确认跳转/取消停留”的完整方案 #

虽然beforeunload没法自定义消息，但我们可以分场景处理，既覆盖浏览器自带的卸载拦截（刷新、关闭标签），又在主动跳转时用自定义confirm弹窗：

场景一：处理主动跳转（比如点击链接、提交按钮） #

如果是用户主动触发的页面跳转（比如点击a标签），我们可以在跳转事件里先拦截，用自定义的confirm弹窗询问用户：

// 监听所有a标签的点击事件
$('a').on('click', function(e) {
    if (flag_change_index) {
        const isConfirm = confirm('You are about to leave the page. Continue?');
        if (!isConfirm) {
            e.preventDefault(); // 取消跳转，留在当前页
        }
        // 确认的话，默认行为会继续执行，跳转到新页面
    }
});

// 表单提交的类似处理
$('form').on('submit', function(e) {
    if (flag_change_index) {
        const isConfirm = confirm('You are about to leave the page. Continue?');
        if (!isConfirm) {
            e.preventDefault();
        }
    }
});

场景二：处理刷新、关闭标签页等被动卸载 #

这种情况只能依赖beforeunload事件，虽然弹窗是浏览器默认的，但能起到拦截作用：

$(window).on("beforeunload", function(e) {
    if (flag_change_index) {
        // 现代浏览器只需要返回一个非空值即可触发弹窗，内容由浏览器决定
        e.preventDefault(); // 部分浏览器需要这个操作
        return ''; // 或者任意非空字符串，不影响最终显示内容
    }
});

关键注意事项 #

• 绝对不要在beforeunload事件里调用confirm()或alert()，这些方法会被浏览器直接阻止——因为beforeunload是同步事件，浏览器不允许在这里弹出自定义弹窗。
• 要正确维护flag_change_index的状态：比如用户修改了表单内容后设为true，保存/重置后设为false，避免不必要的拦截打扰用户。

总结 #

• 无法在beforeunload的系统弹窗中显示自定义消息，这是现代浏览器的硬性限制。
• 通过主动跳转场景自定义confirm + 被动卸载场景beforeunload兜底的组合方式，可以完整实现你的需求：用户确认则跳转/离开，取消则留在当前页。

内容的提问来源于stack exchange，提问作者Hoàng Nam Lê