Page Visibility API(页面可见性)
页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面;隐藏的页面,就是我们没有看的页面。 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了。
API 很简单,document.hidden 就返回一个布尔值,如果是true, 表示页面可见,false 则表示,页面隐藏。 不同页面之间来回切换,触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态,取值:visible, hidden 等四个。
document.addEventListener("visibilitychange", function(){ if(document.hidden){ document.title ="hidden"; }else { document.title = "visibile"; } })
我们打开这个页面,然后再打开另一个页面,来回点击这两个页面,当我们看到这个页面时,标题显示visiable ,当我们看另一个页面时,标题显示hidden;
动画,视频,音频都可以在页面显示时打开,在页面隐藏时关闭。
Page Visibility API(页面可见性)的更多相关文章
- Page Visibility API 页面是否获取焦点 Event: visibilitychange
W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Docum ...
- H5的Page Visibility API
概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...
- Page Visibility API
在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态 ...
- 妙趣横生的HTML5 Page Visibility API
起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...
- 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件
[摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...
- HTML5 Page Visibility
什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...
- Page Visibility(页面可见性) API介绍、微拓展[转]
一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位 ...
- 拥抱HTML5 — Page Visibility(页面可见性) API介绍
H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...
- Page Visibility(网页可见性) API与登录同步引导页实例页面
页面1 HTML代码: <p id="loginInfo"></p> JS代码: (function() { if (typeof pageVis ...
随机推荐
- mac 下面wireshark 找不到网卡
终端上面,执行如下命令: sudo chgrp admin /dev/bpf* sudo chmod g+rw /dev/bpf* http://www.9upk.com/article/25 ...
- markdown 设置字体颜色
<font color=red>内容</font> markdown.
- 关于echarts的疑问
echarts-例子--待解决:模拟迁徙里面的 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.0 ...
- CentOS7 安装与配置Ant
安装前提:需安装jdk(java-1.8.0-openjdk-devel). 1.到官网下载Antt包,我下的是:apache-ant-1.9.7-bin.tar.gz 2.解压缩 tar -zxvf ...
- bbs网站 models
bbs网站 models #!/usr/bin/env python #_*_coding:utf-8_*_ from django.db import models from django.cont ...
- lua 模块功能
lua5.1 模块理解 http://www.lua.org/manual/5.1/manual.html#pdf-module 模块 5.3 – Modules The package librar ...
- Web前端开发规范文档
Web前端开发规范文档 规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(windos下tab键占四个空格,linux下TAB键占八个空格). CSS样式属性或者JAVASCRI ...
- MyBatis 注解使用动态SQL
使用MyBatis很长时间了,一直使用的是XML配置的 SQL,刚好在上一个项目中尝试使用注解方式开发,主要是由于XML配置过于繁琐,注解可以直接写在Mapper函数上,更加的方便一些. 在注解上不能 ...
- 获取图片中感兴趣区域的信息(Matlab实现)
内容提要 如果一幅图中只有一小部分图像你感兴趣(你想研究的部分),那么截图工具就可以了,但是如果你想知道这个区域在原图像中的坐标位置呢? 这可是截图工具所办不到的,前段时间我就需要这个功能,于是将其用 ...
- C++复现经典游戏——扫雷
国庆小长假,当大家都去看人山人海的时候,我独自一人狂码代码.这两天想要实现的内容是Windows上的一个经典游戏——扫雷.相信90后和一些上班族对此并不陌生.然而,从win8开始,扫雷就不再是Wind ...