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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
小程序实现tab标签页
Nov 16 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
10个值得深思的PHP面试题
2016/11/14 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
Three.js学习之网格
2016/08/10 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
Python网络爬虫实例讲解
2016/04/28 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
公司中秋节活动方案
2014/02/12 职场文书
早会主持词
2014/03/17 职场文书
梅花魂教学反思
2014/04/25 职场文书
小露珠教学反思
2014/04/30 职场文书
工会工作个人总结
2015/03/03 职场文书
工作简报范文
2015/07/21 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书