Web开发者的最爱 5个超实用的HTML5 API
摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋渐浓。HTML5的许多功能也都能在现代浏览器中得以实现。然而,作为开发者,除了关注HTML5的功能和开发工具外,你有对其API留意过吗?本文将为你提供5个非常实用的API,绝对让你收获满满!
HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML APIs,有些API已逐渐成为他们的好帮手。最近,我又接触到了5个非常实用的HTML5 API,在此和大家分享,希望这些API能帮助你开发出更好的Web Apps。
全屏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
该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";
这是个非常有趣的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);
显然,这是一款用在移动设备上的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);
点击阅读教程
Link Prefetching提供了链接预取功能,可以让开发者更清晰流畅的预加载网站内容,提高用户体验。
- <!-- full page -->
- <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
- <!-- just an image -->
- <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
点击阅读教程
这是5个值得Web开发者们细心研究的API,在未来会被广泛运用。利用这些API可以帮你构建一些世界级的企业应用,不妨把它们组合起来使用看看!
更多精彩内容,请关注新浪微博@CSDN研发频道
相关阅读:你不知道的5个HTML5 API
Web开发者的最爱 5个超实用的HTML5 API的更多相关文章
- Web开发者和设计师必须要知道的 iOS 8 十个变化
原文出处: mobilexweb 译文出处:罗磊(@罗罗磊磊) 欢迎分享原创到伯乐头条 喜大普奔,喜极而泣,喜当爹,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周 ...
- 那些让 Web 开发者们深感意外的事情
作为 Web 开发者,对自己的行业前景,人人都有自己的看法,然而,任何行业都有出人意料的地方.著名的 Web 开发设计博客 Nope.com 曾向他们的读者做了一个调查,请他们列举 Web 开发领域那 ...
- 在Linux系统下运行微信Web开发者工具
微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux ...
- 微信小程序IDE(微信web开发者工具)安装、破解手册
1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...
- Web开发者需养成的好习惯
Web开发者需养成的8个好习惯 每个行业有着每个行业的标准和一些要求,自己只是一个进入前端领域的小白,但是深刻的知道,习惯很重要,就Web开发分享一下,要养成的一些好的习惯. 优秀的Web开发人员工作 ...
- 使用eclipse+fiddler+微信web开发者工具调试本地微信页面
前面已经说了调试服务器上的微信页面,放链接:http://www.cnblogs.com/Gabriel-Wei/p/5977850.html 还有fiddler调试链接:http://www.cnb ...
- 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)
前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使 ...
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...
- 微信web开发者工具初探
最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同 ...
随机推荐
- jquery给img添加按钮事件
1. img控件加id <a href="#"><img width="20" height="20" id=" ...
- 8、代理模式(Proxy)
其实每个模式名称就表明了该模式的作用,代理模式就是多一个代理类出来,替原对象进行一些操作,比如我们在租房子的时候回去找中介,为什么呢?因为你对该地区房屋的信息掌握的不够全面,希望找一个更熟悉的人去帮你 ...
- 我也谈javascript闭包
1.什么是闭包呢?Whenever you see the function keyword within another function, the inner function has acces ...
- 转: OGG Checkpoint 详解
1. OGG Checkpoint 详解 定位中断的位置,下次启动从中断的位置开始恢复. 1.target 端配置: 2.一条记录对应一个replicat 一. Extract Checkpoints ...
- js选择一个选项 跳出另一个选项 跳出一个输入框
跳出输入框 <script language="javascript"> function $(obj){return document.getElementById( ...
- CALayer --> UIView
一.CALayer和UIView的关系 UIView显示在屏幕上归功于CALayer 可以说:UIView依赖CALayer,又高于CALayer 通过调用drawRect方法来渲染自身的内容,调节C ...
- vs2005中分割线怎么插入
用Label控件,将Label控件的AutoSize设为False,然后清除Text属性,再将BorderStyle属性设为Fixed3D,宽度设为2个像素,就可以成为分割线. 效果:
- Android网络开发之OkHttp--基本用法GET
1.OkHttp框架使用了OkIo.jar包,不要忘记添加. 2.对于Request对象是如何实例化的,大家可以参考--java builder设计模式 http://www.cnblogs.com/ ...
- eclipse proxy
-Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...
- STM32的优先级NVIC_PriorityGroupConfig的理解及其使用(转)
源:http://blog.csdn.net/yx_l128125/article/details/9703843 写作原由:因为之前有对stm32 优先级做过研究,但是没时间把整理的东西发表,最近项 ...