HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML APIs,有些API已逐渐成为他们的好帮手。最近,我又接触到了5个非常实用的HTML5 API,在此和大家分享,希望这些API能帮助你开发出更好的Web Apps。
1.Fullscreen API
全屏API,顾名思义,全屏API可以让开发人员进入到浏览器的全屏模式,用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者:
- // Find the right method, call on correct element
- function launchFullScreen(element) {
- if(element.requestFullScreen) {
- element.requestFullScreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if(element.webkitRequestFullScreen) {
- element.webkitRequestFullScreen();
- }
- }
- // Launch fullscreen for browsers that support it!
- launchFullScreen(document.documentElement); // the whole page
- launchFullScreen(document.getElementById("videoElement")); // any individual element
点击查看教程和示例
2.Page Visibility API
该API给开发者提供了一个监听事件,可以告诉开发者当前用户关注的页面TAB以及目前在窗口上所打开的页面状态。
- // Adapted slightly from Sam Dutton
- // Set name of hidden property and visibility change event
- // 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";
点击查看教程和示例
3.getUserMedia API
这是个非常有趣的API,使用该API可以访问多媒体设备,比如笔记本的摄像头(要有用户权限)。利用该API与<video>和canvas元素,可以在浏览器里面捕获许多漂亮的图片。
- // Put event listeners into place
- window.addEventListener("DOMContentLoaded", function() {
- // Grab elements, create settings, etc.
- 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);
- };
-
- // Put video listeners into place
- 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.Battery API
显然,这是一款用在移动设备上的API,检查电池电量和状态。
- // Get the battery!
- var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
-
- // A few useful battery properties
- console.warn("Battery charging: ", battery.charging); // true
- console.warn("Battery level: ", battery.level); // 0.58
- console.warn("Battery discharging time: ", battery.dischargingTime);
-
- // Add a few event listeners
- battery.addEventListener("chargingchange", function(e) {
- console.warn("Battery charge change: ", battery.charging);
- }, false);
点击阅读教程
5.Link Prefetching
Link Prefetching提供了链接预取功能,可以让开发者更清晰流畅的预加载网站内容,提高用户体验。
-
- <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
-
-
- <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
点击阅读教程
这是5个值得Web开发者们细心研究的API,在未来会被广泛运用。利用这些API可以帮你构建一些世界级的企业应用,不妨把它们组合起来使用看看!
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。