摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋渐浓。HTML5的许多功能也都能在现代浏览器中得以实现。然而,作为开发者,除了关注HTML5的功能和开发工具外,你有对其API留意过吗?本文将为你提供5个非常实用的API,绝对让你收获满满!

HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML APIs,有些API已逐渐成为他们的好帮手。最近,我又接触到了5个非常实用的HTML5 API,在此和大家分享,希望这些API能帮助你开发出更好的Web Apps。

1.Fullscreen API

全屏API,顾名思义,全屏API可以让开发人员进入到浏览器的全屏模式,用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者:

  1. // Find the right method, call on correct element 
  2. function launchFullScreen(element) { 
  3.   if(element.requestFullScreen) { 
  4.     element.requestFullScreen(); 
  5.   } else if(element.mozRequestFullScreen) { 
  6.     element.mozRequestFullScreen(); 
  7.   } else if(element.webkitRequestFullScreen) { 
  8.     element.webkitRequestFullScreen(); 
  9.   } 
  10. // Launch fullscreen for browsers that support it! 
  11. launchFullScreen(document.documentElement); // the whole page 
  12. launchFullScreen(document.getElementById("videoElement")); // any individual element

点击查看教程示例

2.Page Visibility API

该API给开发者提供了一个监听事件,可以告诉开发者当前用户关注的页面TAB以及目前在窗口上所打开的页面状态。

  1. // Adapted slightly from Sam Dutton 
  2. // Set name of hidden property and visibility change event 
  3. // since some browsers only offer vendor-prefixed support 
  4. var hidden, state, visibilityChange;  
  5. if (typeof document.hidden !== "undefined") { 
  6.   hidden = "hidden"; 
  7.   visibilityChange = "visibilitychange"; 
  8.   state = "visibilityState"; 
  9. } else if (typeof document.mozHidden !== "undefined") { 
  10.   hidden = "mozHidden"; 
  11.   visibilityChange = "mozvisibilitychange"; 
  12.   state = "mozVisibilityState"; 
  13. } else if (typeof document.msHidden !== "undefined") { 
  14.   hidden = "msHidden"; 
  15.   visibilityChange = "msvisibilitychange"; 
  16.   state = "msVisibilityState"; 
  17. } else if (typeof document.webkitHidden !== "undefined") { 
  18.   hidden = "webkitHidden"; 
  19.   visibilityChange = "webkitvisibilitychange"; 
  20.   state = "webkitVisibilityState";

点击查看教程示例

3.getUserMedia API

这是个非常有趣的API,使用该API可以访问多媒体设备,比如笔记本的摄像头(要有用户权限)。利用该API与<video>和canvas元素,可以在浏览器里面捕获许多漂亮的图片。

  1. // Put event listeners into place 
  2. window.addEventListener("DOMContentLoaded", function() { 
  3.   // Grab elements, create settings, etc. 
  4.   var canvas = document.getElementById("canvas"), 
  5.     context = canvas.getContext("2d"), 
  6.     video = document.getElementById("video"), 
  7.     videoObj = { "video": true }, 
  8.     errBack = function(error) { 
  9.       console.log("Video capture error: ", error.code);  
  10.     }; 
  11.  
  12.   // Put video listeners into place 
  13.   if(navigator.getUserMedia) { // Standard 
  14.     navigator.getUserMedia(videoObj, function(stream) { 
  15.       video.src = stream; 
  16.       video.play(); 
  17.     }, errBack); 
  18.   } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
  19.     navigator.webkitGetUserMedia(videoObj, function(stream){ 
  20.       video.src = window.webkitURL.createObjectURL(stream); 
  21.       video.play(); 
  22.     }, errBack); 
  23.   } 
  24. }, false);

点击查看教程示例

4.Battery API

显然,这是一款用在移动设备上的API,检查电池电量和状态。

  1. // Get the battery! 
  2. var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; 
  3.  
  4. // A few useful battery properties 
  5. console.warn("Battery charging: ", battery.charging); // true 
  6. console.warn("Battery level: ", battery.level); // 0.58 
  7. console.warn("Battery discharging time: ", battery.dischargingTime); 
  8.  
  9. // Add a few event listeners 
  10. battery.addEventListener("chargingchange", function(e) { 
  11.   console.warn("Battery charge change: ", battery.charging); 
  12. }, false);

点击阅读教程

5.Link Prefetching

Link Prefetching提供了链接预取功能,可以让开发者更清晰流畅的预加载网站内容,提高用户体验。

  1. <!-- full page -->
  2. <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
  3.  
  4. <!-- just an image -->
  5. <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

点击阅读教程

这是5个值得Web开发者们细心研究的API,在未来会被广泛运用。利用这些API可以帮你构建一些世界级的企业应用,不妨把它们组合起来使用看看!

更多精彩内容,请关注新浪微博@CSDN研发频道

相关阅读:你不知道的5个HTML5 API

来自:David Walsh Blog

Web开发者的最爱 5个超实用的HTML5 API的更多相关文章

  1. Web开发者和设计师必须要知道的 iOS 8 十个变化

    原文出处: mobilexweb   译文出处:罗磊(@罗罗磊磊)   欢迎分享原创到伯乐头条 喜大普奔,喜极而泣,喜当爹,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周 ...

  2. 那些让 Web 开发者们深感意外的事情

    作为 Web 开发者,对自己的行业前景,人人都有自己的看法,然而,任何行业都有出人意料的地方.著名的 Web 开发设计博客 Nope.com 曾向他们的读者做了一个调查,请他们列举 Web 开发领域那 ...

  3. 在Linux系统下运行微信Web开发者工具

    微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux ...

  4. 微信小程序IDE(微信web开发者工具)安装、破解手册

    1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...

  5. Web开发者需养成的好习惯

    Web开发者需养成的8个好习惯 每个行业有着每个行业的标准和一些要求,自己只是一个进入前端领域的小白,但是深刻的知道,习惯很重要,就Web开发分享一下,要养成的一些好的习惯. 优秀的Web开发人员工作 ...

  6. 使用eclipse+fiddler+微信web开发者工具调试本地微信页面

    前面已经说了调试服务器上的微信页面,放链接:http://www.cnblogs.com/Gabriel-Wei/p/5977850.html 还有fiddler调试链接:http://www.cnb ...

  7. 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使 ...

  8. mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案

    微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...

  9. 微信web开发者工具初探

    最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同 ...

随机推荐

  1. Redis SAVE 命令 返回 ERR

    今天使用redis-cli客户端中执行SAVE命令返回 (error) ERR Baidu找不到答案,去Google找一下 应该是redis-server服务没有root权限 然后sudo kill ...

  2. arm nop

    MOV R0,R0 这个语句相当于做一次无用功,也就相当于实现了NOP.       接下去就是怎么修改机器码的部分.先查询手册,查到MOV 的机器码是0xE1A0(此处可能不同,主要看自己IDA反汇 ...

  3. Java中的随机数生成器:Random,ThreadLocalRandom,SecureRandom

    Java中的随机数生成器:Random,ThreadLocalRandom,SecureRandom 文中的 Random即:java.util.Random,ThreadLocalRandom 即: ...

  4. 杀死进程kill和fuser

    1 kill -9 id 2   不行的话使用    fuser -k -SIGHUP /opt/bre/cookiemapping/wsapi/123 fuser有一个特别的用法在于它可以一次杀死那 ...

  5. ural1003 Parity

    Parity Time limit: 2.0 secondMemory limit: 64 MB Now and then you play the following game with your ...

  6. HDU 3265 Posters

    矩形面积并,一个拆成四个 #include<cstdio> #include<cstring> #include<cmath> #include<map> ...

  7. NBUT 1457 Sona

    莫队算法+离散化 1.map会TLE,必须离散化做 2.long long会WA,__int64定义 %I64d输出输出能AC 3.注意输入的序列会爆int #include<cstdio> ...

  8. 《Android学习指南》目录

    源:<Android学习指南>目录 Android学习指南的内容分类: 分类 描述 0.学习Android必备的Java基础知识 没有Java基础的朋友,请不要先看Android的课程,这 ...

  9. CodeForces 629C Famil Door and Brackets

    DP. 具体做法:dp[i][j]表示长度为 i 的括号串,前缀和(左括号表示1,右括号表示-1)为 j 的有几种. 状态转移很容易得到:dp[i][j]=dp[i - 1][j + 1]+dp[i ...

  10. S3C2440硬件IIC详解

    S3C2440A RISC微处理器可以支持一个多主控IIC 总线串行接口.一条专用串行数据线(SDA)和一条专用串行时钟线(SCL)传递连接到IIC总线的总线主控和外设之间的信息.SDA和SCL线都为 ...