html5有用,HTML5 一些有用的 APIs

Animation Timing

Window.requestAnimationFrame(callback)： 告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘(类似于 setTimeout，但是更精确)

该函数返回一个唯一标识符，在取消动画请求时使用

callback： 你希望调用的函数

使用上面函数的方法是 反复调用 即可。

// 使用 setTimeout 模拟 requestAnimationFrame

// 1秒 内刷新 60次

function( callback ){

window.setTimeout(callback, 1000 / 60);

};复制代码

Window.cancelAnimationFrame(requestID)： 取消对应 requestID 的动画请求

使用 requestAnimationFrame 的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率(60Hz 或 75Hz)，也就是说，每秒最多只能重绘 60次 或 75次，requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个 API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了 CPU、GPU 和电力。

不过有一点需要注意，requestAnimationFrame 是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame 的动画效果会大打折扣。

Fullscreen API

使用以下方法需要带上浏览器前缀。

Element.requestFullscreen()： 发出一个异步请求，使指定元素全屏显示

// 兼容各个浏览器

function launchFullscreen(element) {

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.msRequestFullscreen){

element.msRequestFullscreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullScreen();

}

}复制代码

Document.exitFullscreen()： 取消全屏

// 兼容各个浏览器

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}复制代码

Document.fullscreenElement： 返回当前处于全屏的节点

// 兼容各个浏览器

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

复制代码

Document.fullscreenEnabled： 返回一个布尔值，表示当前文档是否可以切换到全屏状态

// 兼容各个浏览器

var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;

复制代码

Page Visibility API

PageVisibility API 用于判断页面是否处于浏览器的当前窗口，即是否可见

Document.hidden： 只读属性，返回一个布尔值标识当前页面是否隐藏(hidden)

Document.visibilityState： 只读属性，表示当前页面的状态，可以取三个值，分别是 visibile(页面可见)、hidden(页面不可见)、prerender(页面正处于渲染之中，不可见)

visibilitychange 事件： 当当前页面状态发生变化时触发

// 小测试

document.addEventListener("visibilitychange", function() {

console.log( document.visibilityState );

});复制代码

Geolocation API

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。

navigator.geolocation： 只读属性，返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息

Geolocation.watchPosition(success[, error[, options]])： 注册监听器，在设备的地理位置发生改变的时候自动被调用，返回一个唯一标识符

Geolocation.clearWatch(id)： 清除指定 ID 的监听器

这个 API 在本机上试验时，暂时还没有一次成功获得到地理位置，以后成功补。

Web Notification API

Notification 对象使用来为用户设置和显示桌面通知。

new Notification(title, options)

title： 显示通知的标题

options： 一个用来设置通知的对象(下面只列出部分参数，全部参数看这里)

dir： 文字的方向， auto(自动), ltr(从左到右), rtl(从右到左)

lang： 指定通知中所使用的语言

body： 通知中额外显示的字符串

tag： 赋予通知一个 ID，以便在必要的时候对通知进行刷新、替换或移除。

icon： 一个图片的URL，将被用于显示通知的图标。

事件

click 事件： 用户点击通知时触发

show 事件： 通知显示时触发

error 事件： 通知遇到错误时触发

close 事件： 用户关闭通知时触发

Notification.permission： 静态只读属性，返回一个状态字符串(granted、denied、default)，可以用来判断当前页面是否允许显示通知

Notification.requestPermission()： 静态方法，返回一个 Promise 对象，用于向用户申请当前页面显示通知的权限。这个方法只能被用户行为调用(比如：onclick 事件)，并且不能被其他的方式调用

close()： 实例方法，关闭通知

// 小例子

document.body.onclick = function() {

// 请求允许通知

Notification.requestPermission().then(function(result) {

if (result == 'granted') {

let msg = new Notification('Notification Title', {

body: 'I am notification body~'

});

} else {

alert('Can\'t get permission~');

}

});

};复制代码