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 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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生成excel列序号代码实例
2013/12/24 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
js保留小数点后几位的写法
2014/01/03 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vue实现购物车加减
2020/05/30 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python中for循环控制语句用法实例
2015/06/02 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python3将变量输入的简单实例
2020/08/19 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
物业管理交接协议书
2016/03/24 职场文书
导游词之长城八达岭
2019/09/24 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
JavaScript实现优先级队列
2021/12/06 Javascript
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python