HTML5 一些有用的小众 API
-
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 的动画效果会大打折扣。
See the Pen
by percy ( ) on
.
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 在本机上试验时,暂时还没有一次成功获得到地理位置,以后成功补。
来源: http://www.tuicool.com/articles/YzuaAjZ