月度归档： 2016年7月

页面可见状态API使用方法

Page Visibility API用于获取当前页面的可见性状态，在音频、视频播放、游戏等场景中十分有用。

本文Demo请见：https://www.lyz810.com/demo/pageVisibility/
一、应用场景

页面可见性状态一般可以用于以下场景：

  1. 音频或视频（尤其是视频）播放时，当页面不可见自动暂停播放，页面恢复后再继续播放
  2. 一些定时执行的操作（如微博获取最新的微博条数，该动作每分钟获取一次），没有必要在用户不可见的时候去获取数据
  3. 网页游戏在用户切换页面后，游戏自动暂停，用户体验更好
  4. 统计用户停留时长，这种方式比目前常用的两次页面打开时间之差得到用户停留时长更准确

二、document.visibilityState属性值

document.visibilityState有四个值（后两个是可选属性，浏览器可以不实现）：

  1. hidden
  2. visible
  3. prerender
  4. unloaded

以下情况，document.visibilityState的值为hidden：

  • 浏览器最小化
  • 浏览器没有最小化，但是页面是非活动的标签页（即切换到其他标签），浏览器被其他窗口覆盖值不会受影响
  • 操作系统锁屏

在页面可见时，值为visible

在页面的父级页面不可见时，值可以为prerender(该属性为可选的)

在文档卸载时，值应为unloaded(该属性为可选的)

三、document.hidden属性

document.hidden为布尔型，当页面不可见（hidden）时为true，可见（visible）时为false

四、visibilitychange事件

document中的visibilitychange用于监听可见状态改变的事件，用法如下：

document.addEventListener('visibilitychange', function(){
  console.log(document.visibilityState);
}, false);

五、兼容性

IE：10+
FireFox：18+（10~17需要加moz前缀）
Chrome：33+（14~32需要加webkit前缀）
Safari：6.1+
Opera：12.1以及20+（15~19需要加webkit前缀，12.1不需要加前缀）

JavaScript Blob对象详解

Blob对象为大二进制对象，一个Blob对象就是一个包含有只读原始数据的类文件对象。

一、构造函数

Blob构造函数接受两个可选参数，第一个参数为一个数组，数组的元素可以是任意多个的ArrayBuffer，ArrayBufferView (typed array)， Blob，或者 DOMString对象。
第二个参数为一个对象，设置Blob对象的属性

二、方法

slice：返回一个新的Blob对象，它截取了原对象中的一部分内容。
slice方法支持三个可选参数，分别是start、end、contentType
第一个参数start为起始索引，默认为0
第二个参数end为结束索引，默认为最后一个索引
第三个参数contentType为新生成的Blob对象的MIME类型，默认为空字符串
如果start的值大于原始Blob的值，则新生成的Blob对象大小为0，内容是空的。

三、MIME类型

构造函数的第二个参数一般用于设置MIME类型，例如：

  new Blob(['test'], {type:'text/plain'});

上面的例子中Blob对象的类型为text/plain，内容为test
设置MIME类型的主要目的是让浏览器知道该如何显示该二进制资源（例如，是图片则显示图片，是网页则解析HTML，是二进制文件则弹出下载框等）

四、示例
下面的例子可以复制到浏览器的控制台中，并将返回的blob:开头的url复制粘贴到地址栏中，就可以看到效果。
显示文本：

  var blob = new Blob(['纯文本'],{type: 'text/plain'});
  URL.createObjectURL(blob);

显示网页：

 var blob = new Blob(['<html><head><title>我是标题</title></head>', '<body><h1>我是内容</h1></body></html>'],{type: 'text/html'});
 URL.createObjectURL(blob);

显示一个json：

  var blob = new Blob([JSON.stringify({"key":"value"})], {type:'text/json'});
  URL.createObjectURL(blob);

作为二进制文件下载：

  var blob = new Blob(['文件内容'], {type:'application/octet-binary'});
  URL.createObjectURL(blob);

五、兼容性

IE：10+
Firefox：13+
Chrome：20+
Safari：6+
Opera：12.1+