切换窗口时改变页面title标题

最新推荐文章于 2024-05-13 16:26:52 发布

马可仕马可仕

最新推荐文章于 2024-05-13 16:26:52 发布

阅读量3.4k

点赞数 6

分类专栏：关于前端文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43554584/article/details/93916638

版权

关于前端专栏收录该内容

16 篇文章 3 订阅

订阅专栏

更改标题

前几天看到老高给我看的一个页面效果，百度查了查发现和饿了么官网的有点相似。
类似这样：
avatar

当我们切换页面之后，页面标题变成了如下这个样子。

avatar

这个效果做起来其实很简单，主要是利用了onblur和onfocus事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>这是一个标题</title>
</head>
<body>
<script type="text/javascript">    
    window.onblur=function(){        
        document.title="回来qwq";    
        };    
        window.onfocus=function () {        
        document.title="这是一个标题";   
        }
        </script>
</body>
</html>

onblur和onclick事件可能常见的会用于input框里面以用于获取焦点或者失去焦点时触发某些事件。但是其实window对象也是支持onblur等事件的，就像window支持onload事件一样。
avatar

所以只要设置window.onblur事件（即将焦点移除窗口或者说是切换窗口）和onfocus事件（停留在当前窗口）来动态改变网页的title就可以达到同样的效果啦。