如何使用JS实现退出弹窗阻止用户离开站点？

核心事件API #

你需要用到浏览器原生的beforeunload事件，该事件会在页面即将被卸载（也就是用户尝试离开站点、关闭标签页、刷新页面等场景）时同步触发，是实现这类需求的标准事件处理器。

具体实现逻辑 #

• 先给全局window对象绑定beforeunload事件监听器，事件触发时可以先拦截默认的离开行为，唤起浏览器自带的离开确认弹窗
• 若需要用户确认离开后重新弹出当前站点页面，可以搭配window.open()方法实现新页面唤起，注意要在事件上下文内调用该方法，能大幅降低被浏览器弹窗拦截规则拦截的概率。

代码示例 #

window.addEventListener('beforeunload', (e) => {
  // 拦截默认的离开行为
  e.preventDefault();
  // 兼容部分旧浏览器的要求，必须给returnValue赋值空字符串
  e.returnValue = '';

  // 确认离开后弹出新的站点页面逻辑
  setTimeout(() => {
    // 此处传入你要重新弹出的站点地址，示例用当前页面地址
    window.open(window.location.href, '_blank');
  }, 0);
});

注意事项 #

• 目前绝大多数现代浏览器已经不支持自定义beforeunload触发的确认弹窗的文本内容，只会展示浏览器预置的统一提示文案
• 部分浏览器的弹窗拦截策略会禁止非用户直接交互触发的window.open调用，你可以根据目标适配浏览器的规则调整window.open的触发时机提升唤起成功率。

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