如何将exit intent弹窗触发逻辑改为浏览器返回或地址栏修改时触发

核心逻辑说明 #

• 捕获返回按钮点击：通过history.pushState在当前页面的历史栈中插入一条同地址记录，用户点击返回按钮时会先触发popstate事件而不直接离开页面，我们可以在这个事件回调中触发你的自定义弹窗
• 捕获地址栏修改跳转：用户修改地址栏、关闭页面、刷新页面等主动离开场景都会触发beforeunload事件，可在该事件中触发弹窗，还可根据需求拦截默认离开行为
• 保留原有的会话级触发限制、未登录用户触发限制，每个用户会话仅触发一次弹窗

完整可运行代码 #

document.addEventListener('DOMContentLoaded', () => {
  const FirstVisit = sessionStorage.getItem('fired');
  // 仅未登录用户且未触发过弹窗时初始化事件监听
  if (FirstVisit !== '1' && !app.session.user) {
    // 1. 监听返回按钮点击
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', () => {
      setTimeout(() => {
        Dontleave();
      }, 1000);
      sessionStorage.setItem('fired', '1');
      // 若需要用户点击弹窗确认后再执行返回，可在Dontleave弹窗的确认回调中调用history.back()即可
    });

    // 2. 监听地址栏修改等离开场景
    window.addEventListener('beforeunload', (event) => {
      if (sessionStorage.getItem('fired') === '1') return;
      setTimeout(() => {
        Dontleave();
      }, 1000);
      sessionStorage.setItem('fired', '1');

      // 若需要拦截默认离开行为、弹出浏览器原生确认框，取消下面两行的注释即可
      // event.preventDefault();
      // event.returnValue = '';
    });
  }
});

补充说明：原有基于鼠标移出的触发逻辑已经完全移除，符合你调整触发场景的需求。如果需要保留原来的鼠标移出触发规则，可在代码中追加原有的mouseout事件监听即可。

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