点击通知时切换至发送通知标签页的纯JavaScript实现方案

嘿，这个需求挺实用的，我来给你一步步拆解怎么用纯JS搞定：

1. 先请求通知权限 #

浏览器默认会阻止网站发送通知，所以第一步必须先征得用户同意：

// 请求通知权限
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    throw new Error('用户拒绝了通知权限');
  }
}

调用这个函数，等用户授权后才能继续下一步操作。

2. 创建通知并绑定点击事件 #

拿到权限后，就可以创建通知，同时给它的click事件绑定聚焦标签页的逻辑：

function sendBackgroundNotification(title, options) {
  // 先检查权限状态
  if (Notification.permission !== 'granted') {
    console.warn('通知权限未授权，请先请求权限');
    return;
  }

  // 创建通知实例
  const notification = new Notification(title, options);

  // 绑定点击事件：切换到当前标签页
  notification.addEventListener('click', () => {
    // 先关闭通知（可选，提升用户体验）
    notification.close();
    // 核心：让当前网站的标签页获得焦点
    window.focus();
  });
}

这里的window.focus()是关键——只要你的网站标签页还处于打开状态，它就能让浏览器自动切换到这个标签页。

3. 完整使用示例 #

把上面的逻辑整合起来，比如在页面加载后请求权限，再模拟后台触发通知：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', async () => {
  try {
    await requestNotificationPermission();
    // 模拟5秒后后台发送通知（实际场景可替换成你的业务触发逻辑）
    setTimeout(() => {
      sendBackgroundNotification(
        '新通知提醒',
        {
          body: '点击即可回到网站查看详情',
          icon: '/path/to/your/icon.png' // 可选，设置通知图标
        }
      );
    }, 5000);
  } catch (err) {
    console.error(err.message);
  }
});

额外注意事项 #

• 确保网站运行在HTTPS环境下（localhost开发环境除外），浏览器只允许安全上下文使用Notification API。
• 如果用户意外关闭了标签页，window.focus()会失效，你可以给点击事件加个兜底逻辑：

  notification.addEventListener('click', () => {
    notification.close();
    // 若无法聚焦现有标签，就打开新标签跳转回网站
    if (!window.focus()) {
      window.open(window.location.href, '_self');
    }
  });
  

不过这属于增强逻辑，你的需求是标签页打开时切换，所以默认逻辑已经足够。

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