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 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
input按钮的事件处理大全
Dec 10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
JS变量及其作用域
Mar 29 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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
Terran剧情介绍
2020/03/14 星际争霸
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
RequireJs的使用详解
2017/02/19 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
建筑工地宣传标语
2014/06/18 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
表扬信格式模板
2015/05/05 职场文书
教师工作证明范本
2015/06/12 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS