JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变


Posted in Javascript onJune 01, 2017

说在前面:必须是基于支持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改变,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
Require.JS中的几种define定义方式示例
Jun 01 #Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 #Javascript
react-router中的属性详解
Jun 01 #Javascript
javascript 数据存储的常用函数总结
Jun 01 #Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 #Javascript
详解基于webpack搭建react运行环境
Jun 01 #Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
Jquery ui css framework
2010/06/28 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
django Admin文档生成器使用详解
2019/07/22 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python中有几个关键字
2020/06/04 Python
django使用channels实现通信的示例
2020/10/19 Python
python中str内置函数用法总结
2020/12/27 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
EJB的角色和三个对象
2015/12/31 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
个人工作主要事迹
2014/05/08 职场文书
员工离职感谢信
2015/01/22 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书