<script>
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
document.title = '改变后的标题';
} else {
document.title = '未改变的标题';
}
});
</script>

visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等

举个栗子,比如在html5开发的小游戏中,因切换页面或窗口化页面时,需暂停游戏,从而触发 visibilitychange  事件

1.hidden:页面在后台标签页中或者浏览器最小化

2.visible:页面在前台标签页中

3.prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

4.unloaded:页面正在从内存中卸载

当网页失去焦点时改变网页的title值的更多相关文章

  1. C#TreeView节点选中后失去焦点时改变节点背景色

    C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后           ...

  2. 浏览器title失去焦点时改变title

    document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHid ...

  3. Winform禁止容器内控件获得焦点时改变容器显示范围坐标

    在Winform中当容器的可视高度无法显示所有控件并且容器的AutoScroll属性设置为True的情况下,但点击容器内某个未显示完整的控件时,会出现容器的滚动条自动下滚的情况. 这是由于控件获得焦点 ...

  4. input获得焦点时改变placeholder文本的样式

    HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...

  5. 关于饿了么在浏览器标签页失去焦点时网页Title改变的实现方法

    说在前面:必须是基于支持H5的浏览器才可以 这个 API 本身非常简单,由以下三部分组成. document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小 ...

  6. 使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容

    原文:使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容 第一次在CNBlogs上发Post是提出一个有关使用WebBrowser控件时对SELECT网页元素操作的疑惑,这个问题至今也 ...

  7. Jsoup解析网页源码时常用的Element(s)类

    Jsoup解析网页源码时常用的Element(s)类 一.简介 该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个 ...

  8. js根据浏览器窗口大小实时改变网页文字大小

    目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码: &l ...

  9. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

随机推荐

  1. jenkins学习之centos6.9下安装

    以下为centos6.9下测试安装: docker下安装jenkins: 更新yum源: yum -y update 安装docker: yum -y install docker-io 启动dock ...

  2. Cheatsheet: 2018 11.01 ~ 2019 02.28

    Golang FromXToGo micro - A microservice toolkit Other Easy parsing of Excel spreadsheet format with ...

  3. [C语言] 变量和数据类型和整数和字符

    1.数据类型和变量: 数据是放在内存中的,明确三件事:数据存储在哪里.数据的长度以及数据的处理方式 int n;数据类型指明了数据的长度和处理方式,变量名指明了数据存储在哪里 2.数据长度:是指数据占 ...

  4. java.sql.SQLException: Io 异常: Invalid number format for port number

    java.sql.SQLException: Io 异常: Invalid number format for port number   jdbc数据库链接配置没有写端口号 ​ 要检查jdbc的配置 ...

  5. Java - “JUC”原子类

    根据修改的数据类型,可以将JUC包中的原子操作类可以分为4类. 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIn ...

  6. 线程协作--wait,notify:经典消费者生产者

    JDK 中关于wait,notify这两个方法的介绍: 1.wait:线程进入阻塞. synchronized (obj) { while (<condition does not hold&g ...

  7. CSS使用小技巧

    对于元素position 属性中的 relative absolute 页面居中问题 /* relative */div{ position:relative; margin: 0 auto}​/* ...

  8. Hibernate_Validator学习

    1.   Hibernate Validator介绍 1.1   背景 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从 ...

  9. 个人小项目——Java实现WC功能

    这个小项目用了两种方法解决了该功能的实现. 1.两种方法的功能和具体实现 代码可以成功运行,但是有一些情况考虑不完整,一种方法用了FileOutputStream输出流,为了解决空格无法统计问题,对文 ...

  10. C#调用C++函数

    一.新建C++项目 1.在VS2012中新建->项目->模版->其他语言->Win32->Win32项目->下一步->选DLL,导出符号. 2.在XX.h项目 ...