HTML5的这些api你知道吗

Page Visibility 页面可见性 API

该 API 可以用来检测页面对于用户的 可见性，即返回用户当前浏览的页面或标签 tap 的状态变化。在最小化浏览器、切换 tap 页面时生效.(如需对 app 中几个 webview 进行切换操作时，可使用 pageVisibility 接口进行相应的事件监听和处理。)

page visibility 的介绍

【document.hidden】 该值表示 page 是否是可见的, 值为 boolean 值

【document.visibilityState】 这个 visibilitystate 可有三个值得可能：

【visible】表示该 page 是处于最前面的页面并且不是处于一个最小化的窗口【hidden】表示该 page 不是处于最前面的页面或者是处于一个最小化的窗口【prerender】表示该页面内容正在重新渲染并且该页面对于用户是不可见的

【isibilitychange Event】* 监听 window visibility 的改变的事件

相关代码：

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀  // since some browsers only offer vendor-prefixed support  var hidden, state, visibilityChange;   
if (typeof document.hidden !== "undefined") {  
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
  state = "visibilityState";  
} else if (typeof document.mozHidden !== "undefined") {  
  hidden = "mozHidden";  
  visibilityChange = "mozvisibilitychange";  
  state = "mozVisibilityState";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
  state = "msVisibilityState";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
  state = "webkitVisibilityState";  
}  

// 添加一个标题改变的监听器  
document.addEventListener(visibilityChange, function(e) {// 开始或停止状态处理}, false);

复制

page visibility 的用处

对于 visibility 的改变，我们可以怎么用了做什么呢。

• 我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新
• 我们还可以根据页面的是否可见来暂停和继续音频，视频的播放
• 我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。

Full Screen API 全屏 API

该 API 允许开发者以编程方式将 Web 应用程序 全屏 运行，使 Web 应用程序更像本地应用程序。十分简单有用的 api.

Full Screen 的介绍

FullScreen 的 API 使用非常简单，其有 两种模式

• Launching Fullscreen Mode 启动全屏模式

    // 找到适合浏览器的全屏方法  function launchFullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {element.webkitRequestFullScreen();  
  }  
}  
// 启动全屏模式  
launchFullScreen(document.documentElement); // the whole page  
launchFullScreen(document.getElementById("videoElement")); // any individual element

复制

• Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() {if(document.exitFullscreen) {document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

复制

Full Screen 的相关属性和事件

目前 fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

【document.fullScreenElement】 该属性表示启动全屏的元素（如 video 这些）

【document.fullScreenEnabled】该属性表示当前是否全屏

【fullscreenchange 事件】 监听全屏状态改变的事件

2.2 Full Scrren 的相关

css 有一些关于 fullscreen 的 css 属性

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:full-screen {
    /*pre-spec */
   /* properties */
}
:fullscreen { 
    /* spec */
   /* properties */
}
/* deeper elements */:-webkit-full-screen video {
   width: 100%;
   height: 100%;
}
/* styling the backdrop*/::backdrop {/* properties */}
::-ms-backdrop {/* properties */}

复制

FullScreen 的小结

第一次见到这个 API 是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏 api 目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的 api

getUserMedia API

该 API 允许 Web 应用程序访问摄像头和麦克风，而无需使用插件, 该 API 在客户端最先支持的，但在 pc 端仍不可用。

getUserMedia API 的介绍

先阅读下下面的 html

    
    Snap Photo
    

复制

相关 JS 代码

// 设置事件监听器  
window.addEventListener("DOMContentLoaded", function() {  
  // 获取元素  
  var canvas = document.getElementById("canvas"),  
    context = canvas.getContext("2d"),  
    video = document.getElementById("video"),  
    videoObj = {"video": true},  
    errBack = function(error) {console.log("Video capture error:", error.code);   
    };  

  // 设置 video 监听器  
  if(navigator.getUserMedia) { // Standard  
    navigator.getUserMedia(videoObj, function(stream) {  
      video.src = stream;  
      video.play();}, errBack);  
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
    navigator.webkitGetUserMedia(videoObj, function(stream){video.src = window.webkitURL.createObjectURL(stream);  
      video.play();}, errBack);  
  }  
}, false);

复制

一旦确定当前浏览器是支持 getUserMedia 的时，我们可以同简单的方法将当前我们的 video 元素的 src 视频地址赋值给用户手机本地的 video，然后通过 video 的 play 方法拉起本地 video 的启动和连接。这样的话我们就可以使用本地的播放器来播放。

电池 API（Battery API）

这是一个针对移动设备应用程序的 API，主要用于检测设备电池信息。

Battery API 的介绍

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;  

// 电池属性  
console.warn("Battery charging:", battery.charging); // 当前电池是否在充电 true  
console.warn("Battery level:", battery.level); // 0.58  
console.warn("Battery discharging time:", battery.dischargingTime);  

// 添加事件监听器  
battery.addEventListener("chargingchange", function(e) {console.warn("Battery charge change:", battery.charging);  
}, false);

复制

为什么获取电池信息的 api

为什么我们需要用到 battery api？现在许多移动端 apps 都内嵌着 web 浏览器包装的（不再是完全 native 的应用）。所以我们需要一个方法去获取系统的信息，app 有一些过程是 ` 十分耗电 的，然后我们就需要在用户启动时给用户一些 警告信息 告诉用户当前设备电量较低。这是一个十分重要简单的 api. 相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】

预加载网页内容为浏览者提供一个平滑的浏览体验。这个 api 我们在业务偶尔也会使用到

什么是 link 预加载

Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

复制

什么时候使用 link 预加载是否在自己的网站使用预加载，可以参考一下几点：

• 当你做的是一种类似 slideshow 的网页，需要提前加载近 1 - 3 张页面（假设这些页面并不大）
• 预先加载在网站中许多网页都会用到的图片
• 预先加载网站搜索的结果的页面