如何在使用JavaScript检测标签页切换时获取标签页标题与URL

核心结论 #

默认情况下无法直接获取切换后其他标签页的标题、URL等信息，这是浏览器的安全与隐私限制决定的。

具体说明 #

• Page Visibility API本身仅能检测当前页面的可见性状态（visible/hidden），只能判断当前页是被切走还是被切回，不包含任何其他标签页的相关数据。
• 浏览器出于用户隐私保护，禁止任意网页读取用户打开的其他无关标签页的信息，无论对方网站是否和当前页同源，默认都没有直接读取权限。

可行的特殊场景方案 #

仅满足以下前提时可以实现对应需求：

场景1：目标标签页是当前页主动打开的同源页面 #

如果目标标签页是通过当前页的window.open方法打开、且属于同一域名，你可以保留窗口引用直接读取信息：

// 打开同域名新标签页，保留引用
const targetTab = window.open('/sub-page')
// 读取标签页信息
console.log('标题：', targetTab.document.title)
console.log('URL：', targetTab.location.href)

场景2：需要同步同源的多个已打开标签页信息 #

可以通过跨标签页通信方案，让所有同源页面主动同步自身信息，间接拿到切换后的标签页数据，比如用Broadcast Channel API实现：

// 所有同源页面初始化同一个通信频道
const tabChannel = new BroadcastChannel('same_origin_tab_sync')

// 当前页被激活时广播自身信息
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    tabChannel.postMessage({
      title: document.title,
      url: window.location.href,
      status: 'active'
    })
  }
})

// 监听其他同源标签页的激活广播
tabChannel.onmessage = (event) => {
  if (event.data.status === 'active') {
    console.log('切换到的同源标签页信息：', event.data.title, event.data.url)
  }
}

除上述两种场景外，没有任何方法可以获取非同源、或非当前页可控的其他标签页的信息，不存在浏览器安全限制的绕过方案。

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