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 backgroundImage控制
May 19 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python如何统计代码运行的时长
2019/07/24 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
django框架cookie和session用法实例详解
2019/12/10 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
shell的种类有哪些
2015/04/15 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
八年级物理教学反思
2014/01/19 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
商业计划书之服装
2019/09/09 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python