今天小编跟大家讲解下有关5 个强大的HTML5 API 函数推荐 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关5 个强大的HTML5 API 函数推荐 的相关资料，希望小伙伴们看了有所帮助。
HTML5提供了一些非常强大的Javascript和HTML API 来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API 希望对你的开发工作有所帮助。
1. 全屏API（Fullscreen API）
该API允许开发者以编程方式将Web应用程序全屏运行 使Web应用程序更像本地应用程序。
复制代码代码如下:// 找到适合浏览器的全屏方法 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 pagelaunchFullScreen(document.getElementById("videoElement")); // any individual element
2. 页面可见性API（Page Visibility API）
该API可以用来检测页面对于用户的可见性 即返回用户当前浏览的页面或标签的状态变化。
复制代码代码如下:// 设置隐藏属性和可见改变事件的名称 属性需要加浏览器前缀 // 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); 3. getUserMedia API
该API允许Web应用程序访问摄像头和麦克风 而无需使用插件。
复制代码代码如下:// 设置事件监听器 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);
4. 电池API（Battery API）
这是一个针对移动设备应用程序的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);
5. link Prefetching
预加载网页内容 为浏览者提供一个平滑的浏览体验。
复制代码代码如下:<!-- full page --><link rel="prefetch"href="https://www.aidi.net.cn//html5/<a href="http://davidwalsh.name/css-enhancements-user-experience">http://davidwalsh.name/css-enhancements-user-experience</a>"/> <!-- just an image -->
以上就是这5个新型的API了 小伙伴们了解了吗 有什么疑问请留言 大家一起讨论 共同进步。
来源：爱蒂网
