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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
vue组件实现进度条效果
Jun 06 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
JsChart组件使用详解
2018/03/04 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
小学敬老月活动方案
2014/02/11 职场文书
担保书格式及范文
2014/04/01 职场文书
访谈节目策划方案
2014/05/15 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
小学教研工作总结2015
2015/05/13 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
春晚观后感
2015/06/11 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
python 实现图片特效处理
2022/04/03 Python