JS代码实现浏览器切换页面时网页标题动态切换

onfocus 和 onblur 事件，监听离开页面和进入页面

<script>
var normalTitle = document.title
window.onfocus = function () {document.title = '(/≧▽≦/)咦！你又回来啦';setTimeout(function(){document.title = normalTitle;}, 1500);
};
window.onblur = function () {document.title = '等等，你别走啊！！';
};
</script>

使用 visibilitychange 事件

这种方法好像更实用些，当页面标签隐藏或显示就会触发该事件

<script>
document.addEventListener('visibilitychange',function(){if( document.visibilityState == 'hidden' ){normal_title = document.title;document.title = '哎哟，你别走嘛';}else{document.title = '(/≧▽≦/)咦！你又回来啦';setTimeout(function(){document.title = normal_title;}, 1200)}
});
</script>

或者

<script type="text/javascript">var OriginTitile=document.title;
var titleTime;document.addEventListener('visibilitychange',function(){if(document.hidden){document.title='哎哟，你别走嘛';clearTimeout(titleTime)}else{document.title='(/≧▽≦/)咦！你又回来啦！';titleTime=setTimeout(function(){document.title=OriginTitile},1200)}},!1);
</script>

JS代码实现浏览器切换页面时网页标题动态切换相关推荐

[转] 小结js屏幕、浏览器、页面大小（三）———拖拽
小结js屏幕.浏览器.页面大小(三)---拖拽 (据说今天提前一个小时下班,哦耶...马上过年了,先给大家拜个年,祝大家新年快乐,龙年大吉...) 续上一篇,在之前的再次扩展了几个方法,本次扩展的主要 ...
js监听浏览器tab页面变化
js监听浏览器tab页面变化引言今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...
js判断PC端或是移动端、判断是不是微信浏览器、js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
** js判断PC端或是移动端 ** 第一种 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator ...
Win10下安装必应输入法能导致Alt+Tab切换页面时不能置于最前
Win10下安装必应输入法能导致Alt+Tab切换页面时不能置于最前今天兴致勃勃地安装了微软的必应输入法,结果电脑竟不能使用win10中的部分快捷键,较为明显的是Alt+Tab切换页面不能置于窗口最 ...
Firefox 浏览器打印页面时不打印页眉和页脚
Firefox 浏览器打印页面时去掉页眉和页脚用浏览器打开需要打印的页面点击右上角的打开菜单按钮点击打印在弹出的打印预览界面中点击上方的页面设置点击弹出窗口的页边距和页眉/页脚把 ...
uniapp自定义的tabbar切换页面时不加载onload、onshow问题
uniapp自定义的tabbar切换页面时不加载onload.onshow问题只需要在子组件里使用created()方法,把你的请求放在里面即可,如下
html自动切换图片怎么白屏,javascript – 切换页面时的白屏闪烁
我们有一台在机器上本地运行的AngularJS应用程序(所有资产都在硬盘上),当我们切换页面时,我们看起来很难解决屏幕闪烁问题. 这是发生了什么,我们的问题在#3: 3)**加载新页面时,大约1/2秒 ...
html中主标题与副标题,网页设计中js如何实现页面固定主标题+副标题切换显示...
如本站主标题是"IT技术资料分享",当你进入网站首页的时候鼠标放在页面标题栏时会发现仅显示"IT技术资料分享",当你点击进入网站内页,如文章页,分类页等你会发现 ...
js初化加载页面时ajax会调用两次的原因_在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...

JS代码实现浏览器切换页面时网页标题动态切换

onfocus 和 onblur 事件，监听离开页面和进入页面

使用 visibilitychange 事件

JS代码实现浏览器切换页面时网页标题动态切换相关推荐

最新文章

热门文章