HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML APIs,有些API已逐渐成为他们的好帮手。最近,我又接触到了5个非常实用的HTML5 API,在此和大家分享,希望这些API能帮助你开发出更好的Web Apps。
1.Fullscreen API
全屏API,顾名思义,全屏API可以让开发人员进入到浏览器的全屏模式,用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者:
- //Findtherightmethod,calloncorrectelement
- functionlaunchFullScreen(element){
- if(element.requestFullScreen){
- element.requestFullScreen();
- }elseif(element.mozRequestFullScreen){
- element.mozRequestFullScreen();
- }elseif(element.webkitRequestFullScreen){
- element.webkitRequestFullScreen();
- }
- }
- //Launchfullscreenforbrowsersthatsupportit!
- launchFullScreen(document.documentElement);//thewholepage
- launchFullScreen(document.getElementById("videoElement"));//anyindividualelement
点击查看教程和示例
2.Page Visibility API
该API给开发者提供了一个监听事件,可以告诉开发者当前用户关注的页面TAB以及目前在窗口上所打开的页面状态。
- //AdaptedslightlyfromSamDutton
- //Setnameofhiddenpropertyandvisibilitychangeevent
- //sincesomebrowsersonlyoffervendor-prefixedsupport
- varhidden,state,visibilityChange;
- if(typeofdocument.hidden!=="undefined"){
-
hidden="hidden";
-
visibilityChange="visibilitychange";
-
state="visibilityState";
- }elseif(typeofdocument.mozHidden!=="undefined"){
-
hidden="mozHidden";
-
visibilityChange="mozvisibilitychange";
-
state="mozVisibilityState";
- }elseif(typeofdocument.msHidden!=="undefined"){
-
hidden="msHidden";
-
visibilityChange="msvisibilitychange";
-
state="msVisibilityState";
- }elseif(typeofdocument.webkitHidden!=="undefined"){
-
hidden="webkitHidden";
-
visibilityChange="webkitvisibilitychange";
-
state="webkitVisibilityState";
点击查看教程和示例
3.getUserMedia API
这是个非常有趣的API,使用该API可以访问多媒体设备,比如笔记本的摄像头(要有用户权限)。利用该API与<video>和canvas元素,可以在浏览器里面捕获许多漂亮的图片。
- //Puteventlistenersintoplace
- window.addEventListener("DOMContentLoaded",function(){
- //Grabelements,createsettings,etc.
-
varcanvas=document.getElementById("canvas"),
-
context=canvas.getContext("2d"),
-
video=document.getElementById("video"),
-
videoObj={"video":true},
-
errBack=function(error){
- console.log("Videocaptureerror:",error.code);
- };
- //Putvideolistenersintoplace
- if(navigator.getUserMedia){//Standard
- navigator.getUserMedia(videoObj,function(stream){
-
video.src=stream;
- video.play();
- },errBack);
- }elseif(navigator.webkitGetUserMedia){//WebKit-prefixed
- navigator.webkitGetUserMedia(videoObj,function(stream){
-
video.src=window.webkitURL.createObjectURL(stream);
- video.play();
- },errBack);
- }
- },false);
点击查看教程与示例
4.Battery API
显然,这是一款用在移动设备上的API,检查电池电量和状态。
- //Getthebattery!
-
varbattery=navigator.battery||navigator.webkitBattery||navigator.mozBattery;
- //Afewusefulbatteryproperties
- console.warn("Batterycharging:",battery.charging);//true
- console.warn("Batterylevel:",battery.level);//0.58
- console.warn("Batterydischargingtime:",battery.dischargingTime);
- //Addafeweventlisteners
- battery.addEventListener("chargingchange",function(e){
- console.warn("Batterychargechange:",battery.charging);
- },false);
点击阅读教程
5.Link Prefetching
Link Prefetching提供了链接预取功能,可以让开发者更清晰流畅的预加载网站内容,提高用户体验。
-
<linkrel="prefetch"href="http://davidwalsh.name/css-enhancements-user-experience"/>
-
-
<linkrel="prefetch"href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png"/>
点击阅读教程
这是5个值得Web开发者们细心研究的API,在未来会被广泛运用。利用这些API可以帮你构建一些世界级的企业应用,不妨把它们组合起来使用看看!
相关推荐
Web开发者的最爱5个超实用的HTML5API.pdf
微信web开发者工具
《使用HTML5和Node构建超媒体API》探讨了超媒体API 的设计,介绍了作为超媒体API 的构件块的超媒体因子,并讲解了基本格式、状态转移、领域风格..., 《使用HTML5和Node构建超媒体API》适合系统架构师和Web 开发者阅读。
Web开发者必备速查表,动手写代码是提高能力的最快途径,能力是信心de来源!
C#.net web开发者指南.rar 附源码
微信Web开发者工具,可用于微信小程序,微信公众号的开发
微信小程序,web开发者
微信web开发者工具1.0正式版,版本号:1.01.1711160_x64
为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080
JavaScript开发者必备的10个超级实用工具.zip
C#.NET WEB开发者指南教程(附源代码)
[Packt Publishing] Flash 开发者 HTML5 开发教程 英文版 [Packt Publishing] HTML5 for Flash Developers E Book ☆ 图书概要:☆ Leverage your Flash skill set and learn to create content using a wide ...
微信web开发者工具是一款便捷实用的微信调试工具。微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
java web 开发者突击那本书上用的东西基本都在这里