JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
更新时间：2017年06月01日 14:01:40 作者：fea的听说读写
这篇文章主要介绍了JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变,需要的朋友可以参考下
说在前面:必须是基于支持H5的浏览器才可以
这个 API 本身非常简单，由以下三部分组成。
document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。
document.visibilityState：表示下面 4 个可能状态的值
hidden：页面在后台标签页中或者浏览器最小化
visible：页面在前台标签页中
prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded：页面正在从内存中卸载
Visibilitychange事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。
这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
document.title = '当焦点不在当前窗口时的网页标题';
} else {
document.title = '再变回来或者做点其他的';
}
});
以上所述是小编给大家介绍的JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇阻止表单提交按钮多次提交的完美解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-05
这篇文章主要介绍了JS重载实现方法,结合实例形式分析了javascript重载的实现与使用方法,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了js实现一个可以兼容PC端和移动端的div拖动效果实例，具有一定的参考价值，有需要的可以了解一下。2016-12-12
这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了JS简单获取当前年月日星期的方法,结合完整实例形式分析了javascript基于自定义函数获取当前日期时间的方法,涉及javascript中Date()类的使用与日期相关运算技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了JavaScript正则表达式验证登录实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了es6函数之尾递归用法,结合实例形式分析了es6函数尾递归原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了javascript生成随机大小写字母的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript中的普通函数与构造函数比较,需要的朋友可以参考下2015-04-04
一个很棒的 blog 文章，是 PPK 两年前写的，文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。从那起，我已经对这些方法做了大量的研究，并且已经在很多场合使用他们。在很多任务中，他们被证明是非常有用的（特别关于结构的抽象 DOM 选择器）。2008-04-04
最新评论