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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
详解javascript脚本何时会被执行
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注释实例技巧
2008/10/03 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php除数取整示例
2014/04/24 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
Django接受前端数据的几种方法总结
2016/11/04 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python configparser模块操作代码实例
2020/06/08 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server