document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
document.title = '当焦点不在当前窗口时的网页标题';
} else {
document.title = '再变回来或者做点其他的';
}
});

document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。

document.visibilityState:表示下面 4 个可能状态的值

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

visible:页面在前台标签页中

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

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

Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。

浏览器title失去焦点时改变title的更多相关文章

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

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

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

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

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

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

  4. 当网页失去焦点时改变网页的title值

    <script> document.addEventListener('visibilitychange', function() { var isHidden = document.hi ...

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

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

  6. JavaScript监听页面可见性(焦点)同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

  7. 钉钉内置的浏览器怎么改变title

    在我项目的开发过程当中,遇到过在钉钉打开的vue写的h5页面,通过在路由切换的时候通过全局的路由钩子函数改变 document.title 的内容失效的问题. const routes = [ { p ...

  8. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  9. vue router 修改title(IOS 下动态改变title失效)

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

随机推荐

  1. direction

    基本上,大家只要关心下面这两个属性值就好了: direction: ltr; // 默认值 direction: rtl; 其中,ltr是初始值,表示left-to-right,就是从左往右的意思,再 ...

  2. Win7系统打开服务管理界面的几种方法汇总

    转自:https://www.jb51.net/os/windows/318465.html Win7服务管理包含了计算机操作系统和应用程序提供的所有服务,但是这么多服务并非总是用户所需的.比如打印机 ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道

    ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道 语雀: https://www.yuque.com/yuejiangliu/dotnet/ ...

  4. hexo博客实现多终端共享&webhook自动化部署

    摘要:好不容易搭建了hexo,还不满足.想要实现在小程序上也能访问博客,又不想再写一个后台.每次更新文章到服务器之后,希望能自动同步到网站上面.如果你有这样的需求,那么希望这篇文章能帮助到你. 我的配 ...

  5. PhpStorm之服务器篇

    打开编辑器,依次点击 Tools->Deloyment->Configuration,进入连接服务器的配置页面 2.点击左上角的 + ,配置一个新的服务器 3.填写添加之后服务器的名称,并 ...

  6. 基于FBX SDK的FBX模型解析与加载 -(二)

    http://blog.csdn.net/bugrunner/article/details/7211515 5. 加载材质 Material是一个模型渲染时必不可少的部分,当然,这些信息也被存到了F ...

  7. bzoj 1187: [HNOI2007]神奇游乐园【插头dp】

    要判边界!!要判边界!!要判边界!!if(j!=m)!!! 我真是zz横着转移要判断到底能不能向右边出边-- 然后剩下的和1814差不多,九十因为不要求经过所有格子,所以左右括号随时可以合并,但是注意 ...

  8. thinkphp5 +elasticsearch

    php7使用elasticsearch 1.安装 官网下载地址:https://www.elastic.co/downloads/elasticsearch # 解压到非root目录,运行时使用非ro ...

  9. CGI、ASP、PHP、JSP、 ASP.NET网站开发语言比较

    一.主流网站开发语言的简介及优缺点. 现在主流的网站开发语言主要包括cgi.asp.php.asp.net.jsp等. HTML:当然这是网页最基本的语言,每一个服务器语言都需要它的支持. (一)  ...

  10. 【poj2528】Mayor's posters

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 64939   Accepted: 18770 ...