如何在WordPress中实现用户关闭/返回时重定向？能否用脚本捕获该动作？

嘿，我来帮你搞定这两个WordPress相关的需求！先直接回答你的第二个问题：完全可以捕获用户关闭页面或点击返回按钮的操作，不过得针对不同场景用不同的浏览器事件，下面给你详细的实现方案：

浏览器提供了两个核心事件来处理这类场景：

• beforeunload事件：会在页面即将卸载时触发，涵盖的场景包括：关闭标签页、刷新页面、点击链接跳转到外部网站、输入新URL跳转。
• popstate事件：专门监听浏览器历史记录的变化，比如用户点击「返回」「前进」按钮，或者用JS调用history.back()/history.forward()时会触发。

根据不同场景，我们可以分别处理，下面的代码可以直接加到你的WordPress站点中：

1. 处理页面关闭/刷新/外部跳转的重定向 #

⚠️ 注意：现代浏览器对beforeunload事件里的强制重定向限制非常严格（防止恶意网站劫持用户），大多数情况下直接重定向会被浏览器拦截。所以更稳妥的方式是先弹出提示，引导用户主动确认，再尝试跳转：

window.addEventListener('beforeunload', function(e) {
  // 尝试延迟重定向（部分浏览器可能允许）
  setTimeout(() => {
    window.location.href = 'https://你的目标新URL';
  }, 0);
  // 触发浏览器默认离开提示（自定义文本可能被部分浏览器忽略）
  e.returnValue = '你确定要离开当前页面吗？';
});

2. 处理浏览器返回按钮的重定向 #

这个场景的重定向成功率很高，因为是监听合法的历史导航行为：

// 标记是否已经重定向过，避免循环跳转
let hasRedirected = false;

window.addEventListener('popstate', function(e) {
  if (!hasRedirected) {
    hasRedirected = true;
    // 跳转到目标URL
    window.location.href = 'https://你的目标新URL';
    // 添加一条当前页面的历史记录，防止用户再次点击返回回到原页面
    history.pushState(null, null, window.location.href);
  }
});

// 页面加载时先添加一条历史记录，确保首次点击返回能触发popstate事件
window.onload = function() {
  history.pushState(null, null, window.location.href);
};

你可以通过以下几种方式把上面的脚本加到站点里：

• 方法一：通过主题functions.php添加
  打开你当前使用主题的functions.php文件，添加以下代码（记得替换目标页面和URL）：

function add_custom_navigation_script() {
  // 仅在指定页面生效，替换成你需要的页面slug（比如'product-page'）
  if ( is_page('目标页面slug') ) {
    ?>
    <script>
      // 这里粘贴上面的JavaScript代码
      let hasRedirected = false;
      window.addEventListener('popstate', function(e) {
        if (!hasRedirected) {
          hasRedirected = true;
          window.location.href = 'https://你的目标新URL';
          history.pushState(null, null, window.location.href);
        }
      });

      window.onload = function() {
        history.pushState(null, null, window.location.href);
      };

      window.addEventListener('beforeunload', function(e) {
        setTimeout(() => {
          window.location.href = 'https://你的目标新URL';
        }, 0);
        e.returnValue = '你确定要离开当前页面吗？';
      });
    </script>
    <?php
  }
}
// 将脚本添加到页面底部
add_action('wp_footer', 'add_custom_navigation_script');

• 方法二：用古腾堡编辑器的自定义HTML区块
  如果你只想在单个页面生效，可以编辑目标页面，在页面底部添加一个「自定义HTML」区块，直接粘贴上面的JavaScript代码即可。

• 对于beforeunload的重定向，不要过度依赖，因为浏览器的限制会导致它不稳定，建议优先用提示引导用户主动操作。
• 测试时记得用真实的浏览器环境，不要在开发者工具的「禁用缓存」模式下测试，可能会影响事件触发。

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