如何实现关闭浏览器标签页时的带跳转弹窗？现有代码故障求助

嘿，我来帮你搞定这个问题！首先得明确你遇到的两个核心障碍：

1. 浏览器对onbeforeunload的安全限制：这个事件是专门用来触发浏览器自带的离开确认弹窗的，浏览器会直接拦截所有自定义弹窗（比如你用的Swal），所以你的弹窗会突然消失，这不是代码bug，是浏览器的安全规则。
2. 异步逻辑的时序问题：Swal的.then()是异步回调，而onbeforeunload是同步执行的事件。你在事件函数里判断userclicked的时候，.then()里的代码还没来得及执行，所以userclicked始终是false，逻辑判断自然失效。

可行的实现方案 #

我们换个思路，用visibilitychange事件来监听页面可见性变化——这个事件在用户关闭标签、切换标签、最小化窗口时都会触发，而且浏览器允许在这里显示自定义弹窗。下面是完整的代码：

// 标记用户是否已经和弹窗交互过，避免重复触发
let hasInteracted = false;

document.addEventListener('visibilitychange', function() {
    // 只有页面从可见变隐藏，且用户没交互过的时候才弹弹窗
    if (document.visibilityState === 'hidden' && !hasInteracted) {
        hasInteracted = true;
        Swal.fire({
            title: 'New Promotions!',
            text: 'Visit to See New Promotions!',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'View More',
            cancelButtonText: 'Cancel',
            showCloseButton: true,
            allowOutsideClick: false // 防止点击空白处关闭弹窗，确保用户选择按钮
        }).then((result) => {
            if (result.isConfirmed) {
                // 点击「查看更多」，跳转到推广页面
                window.location.href = "{{url('front/promotionpage')}}";
            } else {
                // 点击「取消」或关闭弹窗，恢复标记，下次页面隐藏时还能触发
                hasInteracted = false;
            }
        });
    }
});

// 补充处理刷新页面的情况
window.onbeforeunload = function(e) {
    if (!hasInteracted) {
        // 返回字符串触发浏览器默认提示，提醒用户可能错过推广
        return "Wait! We have new promotions for you!";
    }
    return null;
};

方案细节说明 #

• visibilitychange事件：完美避开onbeforeunload的弹窗限制，能正常显示你想要的自定义Swal弹窗。
• hasInteracted标记：防止用户反复切换标签时弹窗重复弹出，提升体验。
• allowOutsideClick: false：强制用户必须点击按钮，避免误操作导致弹窗关闭。
• 补充onbeforeunload：处理用户直接刷新页面的场景，因为刷新时visibilitychange的触发时机不稳定，用浏览器默认提示兜底，引导用户回到页面后看到自定义弹窗。

这样修改后，就能实现你想要的功能：关闭/切换标签时弹出自定义推广弹窗，点击「查看更多」跳转，点击「取消」正常离开网站。

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