如何实现浏览器标签页切换时动态切换页面提示消息？

该功能完全可以实现，不需要复杂技术方案，用浏览器原生提供的API就能完成。

核心依赖浏览器原生的页面可见性（Page Visibility）能力：

• 每个页面的document对象上都有visibilityState属性，会实时返回当前页面的可见状态：visible代表页面在当前激活标签页展示、用户可见；hidden代表页面被切走、最小化或者被其他窗口完全遮挡，用户看不到
• 给document绑定visibilitychange事件，每次状态切换时根据当前的可见性值，修改页面对应的提示文本即可

直接把下面代码放到页面里就能运行：

<!-- 提示消息容器 -->
<div id="page-tip"></div>

<script>
const tipNode = document.getElementById('page-tip')
// 页面初始默认提示
tipNode.textContent = '当前页面正常浏览中'

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 用户离开标签页时更新提示
    tipNode.textContent = "Looks like you're gone ..."
  }
  if (document.visibilityState === 'visible') {
    // 用户返回标签页时更新提示
    tipNode.textContent = "Good to be back"
  }
})
</script>

• 不要用window上的focus/blur事件实现这个需求，这两个事件触发场景太杂：页面内弹出输入框、点击页面内的iframe元素、甚至浏览器弹权限申请弹窗都会触发误判，效果不准
• 这个API的兼容性覆盖所有主流现代浏览器，不需要额外做兼容处理

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