我们在浏览网页的时候，有时把浏览器最小化到任务栏，会看到任务栏中的网页标题改变了，显示的不是在浏览网页的标题，而是其他的标题，有可能是主站的名字或其他产品的名字。

这个给我们的启发就是，在用户暂时不浏览网页的时候（最小化到任务栏），我们是否可以把标题换成我们需要宣传的产品或品牌，给用户方便找到或加深印象呢？

下面我们就来看看是如何实现这个功能的。

【上代码】

<script> // 浏览器标题切换 var OriginTitile = document.title; // 保存之前页面标题 var titleTime; document.addEventListener('visibilitychange', function(){ if (document.hidden){ document.title = '我在后台被隐藏了'; clearTimeout(titleTime); }else{ document.title = ' 我要准备恢复了 ~ 2s'; titleTime = setTimeout(function() { document.title = OriginTitile; }, 2000); // 2秒后恢复原标题 } }); </script>

浏览网页时

最小化后

重新打开

2秒后，恢复原样

【原理分析】

其实就是用了js的visibilitychange事件，判断网页是否隐藏(hidden)状态来控制网页标题文字，这是有前端基础的伙伴都知道的，就不赘述了。

最后，希望这个功能可以给有需要的人一点帮助，给网页做更好的优化和宣传！