技术标签: js javascript
以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性(Page Visibility)API的简单应用。
简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件。你可以检测到该事件并执行一些操作或行为。例如:标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
以前开发人员往往在客串上注册 onblur 和onfocus 来检测页面是不是活动页面,但它不会告诉您页面对用户是隐藏的。Page Visibility API 解决了这个问题。
这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。
Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|
13前缀webkit 33无需前缀 |
10前缀moz 18无需前缀 |
10前缀ms | 12.10 | 7 |
Page Visibility (Second Edition) 中定义了2个只读的 document 属性:hidden 和 visibilityState。
其中 document.hidden 是一个布尔值,简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细,目前有四个可能的值:
visible : 页面内容至少部分可见。这意味着在实际情况中,该网页是一个非最小化窗口的可见标签页。
hidden : 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。
prerender : 网页内容被预渲染并且用户不可见。
unloaded : 如果文档被卸载,那么这个值将被返回。
一般情况下我们使用 document.hidden 就能满足通常的需求。
为了支持老版本的浏览器,我们需要对 document.hidden 在做一些前缀处理:
function getHiddenProp()
{
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
同样的,我们可以获取 document.visibilityState 属性:
function getVisibilityState()
{
var prefixes = ['webkit', 'moz', 'ms', 'o'];
if ('visibilityState' in document) return 'visibilityState';
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'VisibilityState') in document)
return prefixes[i] + 'VisibilityState';
}
// otherwise it's not supported
return null;
}
这样我们可以写一个跨浏览器的函数,检查文档是否可见。
function isHidden()
{
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
你可以在 document对象上注册一个监听 visibilitychange 事件,根据 document.hidden 或者 document.visibilityState 属性做一些业务逻辑:
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp)
{
var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
document.addEventListener(evtname, function ()
{
document.title = document[getVisibilityState()]+"状态";
}, false);
}
上面的代码会在页面可见性发生变化时修改 document.title 的值,从而可以在开发聊天软件时浏览器标签闪烁。
文章浏览阅读385次。基于Arduino uno,获取红外寻迹传感器的原始值_怎么检测红外寻迹模块返回值
文章浏览阅读494次,点赞5次,收藏9次。单片机(Microcontroller)是一种集成了微处理器核心、存储器、输入/输出接口和定时器等功能模块的集成电路芯片,具有体积小、功耗低、性价比高等特点,被广泛应用于各个领域。单片机的发展历史可以追溯到20世纪70年代,当时的单片机功能有限,主要用于简单的控制任务。
文章浏览阅读412次。https://zhuanlan.zhihu.com/p/54096381_生成对抗网络 python代码
文章浏览阅读5.2k次,点赞7次,收藏18次。有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:想在网页上展示上述表格效果可以使用以下代码:创建表格的四个元素:table、tbody、tr、th、td1、…:整个表格以标记开始、标记结束。2、…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。3、…_怎样在网站中添加表格别人可以下载
文章浏览阅读770次。到目前为止,我们已经讨论了如何将对象实例公开给QML上下文。有时我们还希望在QML中可以使用注册类本身。注册允许将类当作QML中的数据类型来使用。此外,注册还可以提供其他功能,比如允许在QML中将类用作可实例化的QML对象类型,或者允许在QML中导入和使用类的单例实例。通常我们使用Q_OBJECT宏注册从QObject派生的类,也可以用Q_GADGET宏声明一个比QObject“更轻”的版本。在这些更轻的类中,我们可以访问它们的属性、枚举和可调用的方法,但不能使用信号槽系统,我们稍后会进行介绍。1. 注_qmlregisteruncreatabletype
文章浏览阅读2.1k次,点赞7次,收藏15次。头文件与命名空间的关系 Q:有些书说有些头文件不在std里是什么意思?std里包含些什么?为什么不用std就不能使用cout?头文件中声明的东西为什么在使用的时候需要先using namespace std;一下?如果我不用#include和其他头文件。只用using namespace std 的话,是不能用cout的。这说明cout是在iostream里声明_c#中命名空间和c语言中头文件之间的关系
文章浏览阅读1.2k次,点赞2次,收藏8次。注释dtype=np.int代表导入数据的格式为整数delimiter=’,'代表原始数据的存储格式为以‘,’为间隔原始文件中以‘#’开头的行代表被注释,不会被np.loadtxt读取通过[[0] * b for i in range(a)]的方式初始化一个x[a][b]的二维数组np.savetxt()函数可以用来保存数据,第一个参数为保存数据的路径,其中C是自定义的文件名,如果该文..._python 读取csv矩阵乘法
文章浏览阅读1.4k次。军团要塞2绘画渲染(a)美术概念 (b)游戏内玩家看到的角色摘要在《军团要塞2》中我们提出了一整套美术方案和新的实时渲染技术,这种技术能实现出一种独一无二的渲染风格。《军团要塞2》由美术和程序基于20世纪初时商业插画中的传统风格合作完成。在这篇论文中,我们会结合美术方向与技术选择,来讨论如何支持美术目标和玩法限制。除了实现一种有冲击力的风格外,我们也设计了边缘光照和亮度与色调变化的着色器技..._军团要塞画师
文章浏览阅读9.6k次,点赞8次,收藏65次。这里介绍:RGB图3个通道的提取、RGB图转灰度图、图片反转、图片亮度调整具体操作,需导入的库如下:原图如下:结果如下,从左到右分别是:Red,Green,Blue这里借助skimage库中的exposure函数来进行图像亮度的调整结果如下:........._jupter rgb灰度直方图提取
文章浏览阅读931次。2023年地级、省级、县级、国界、九段线的shp数据_九段线shp数据
文章浏览阅读797次,点赞16次,收藏19次。二十一世纪我们的社会进入了信息时代,信息管理系统的建立,大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多,而在线管理系统刚好能满足这些需求,在线管理系统突破了传统管理方式的局限性。于是本文针对这一需求设计并实现了一个基于django高校本科生学习成长记录系统,为了简捷并有效的解决学习各方面的问题。
文章浏览阅读7.7k次。为什么要共享session?我们使用单台Tomcat的时候不会有共享sesssion的疑虑,只要使用Tomcat的默认配置即可,session即可存储在Tomcat上。但是随着业务的扩大,增加Tomcat节点构成Tomcat集群大势所趋,分布式带来了增加更大规模并发请求的优势,但是也随之到来了一个问题,每个Tomcat只存储来访问自己的请求产生的session,如果Tomcat-A已经为客..._redis分布式session共享