切换窗口时改变页面title标题
更改标题
前几天看到老高给我看的一个页面效果，百度查了查发现和饿了么官网的有点相似。
类似这样：
当我们切换页面之后，页面标题变成了如下这个样子。
这个效果做起来其实很简单，主要是利用了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事件一样。
所以只要设置window.onblur事件（即将焦点移除窗口或者说是切换窗口）和onfocus事件（停留在当前窗口）来动态改变网页的title就可以达到同样的效果啦。
参考：w3c网站；
切换窗口时改变页面title标题
更改标题
前几天看到老高给我看的一个页面效果，百度查了查发现和饿了么官网的有点相似。
类似这样：
当我们切换页面之后，页面标题变成了如下这个样子。
这个效果做起来其实很简单，主要是利用了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事件一样。
所以只要设置window.onblur事件（即将焦点移除窗口或者说是切换窗口）和onfocus事件（停留在当前窗口）来动态改变网页的title就可以达到同样的效果啦。
参考：w3c网站；