小型销售网站如何用JavaScript结合visibilitystate实现页面自动重定向？

你的需求是在用户切换标签页、关闭页面、最小化浏览器或切换到其他应用时，延迟1秒跳转指定URL。现有代码存在几个问题，下面是优化后的实现：

问题分析 #

1. 未处理用户快速切回页面的场景：如果用户切换标签后立刻返回，原有定时器仍会执行跳转，影响正常使用
2. URL格式错误：www.google.com会被当作相对路径，需要补全协议头（https://）
3. 页面卸载时定时器可能被浏览器终止，导致跳转失效

优化代码 #

// 定义定时器变量，用于后续清除
let leaveTimer = null;

// 监听visibilitychange事件
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'hidden') {
    // 用户离开页面时启动定时器
    leaveTimer = setTimeout(() => {
      window.location.href = 'https://www.google.com';
    }, 1000);
  } else {
    // 用户切回页面时清除定时器，取消跳转
    clearTimeout(leaveTimer);
  }
});

// 监听页面卸载事件，处理直接关闭浏览器的情况
window.addEventListener("beforeunload", () => {
  clearTimeout(leaveTimer);
  // 若需要在关闭时立即跳转，可取消下面的注释（部分浏览器可能限制此行为）
  // window.location.href = 'https://www.google.com';
});

关键说明 #

• 定时器清理：在页面重新变为visible时清除定时器，避免误跳转
• URL规范：必须添加https://或http://，确保跳转到正确的外部地址
• 页面卸载处理：通过beforeunload事件清理定时器，同时可根据需求决定是否在关闭时立即触发跳转（注意：部分现代浏览器会限制页面卸载时的跳转行为，可能无法生效）

内容的提问来源于stack exchange，提问作者TEE-JAY