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

最新推荐文章于 2024-08-15 17:50:31 发布

马可仕马可仕

最新推荐文章于 2024-08-15 17:50:31 发布

阅读量3.7k

点赞数 6

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43554584/article/details/93916638

关于前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用onblur和onfocus事件动态更改网页标题的方法，通过简单的JavaScript代码实现页面焦点变化时标题的自动更新，适用于模仿饿了么官网等网站的效果。

更改标题

前几天看到老高给我看的一个页面效果，百度查了查发现和饿了么官网的有点相似。
类似这样：
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就可以达到同样的效果啦。

avatar

avatar

参考：w3c网站；