html5的几个Webapi
来源:互联网 发布:餐馆软件 编辑:程序博客网 时间:2024/05/18 14:11
http://blog.sina.com.cn/s/blog_4ab0d5740101a8lb.html
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API,希望对你的开发工作有所帮助。
1. 全屏API(Fullscreen API)
该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。
2. 页面可见性API(Page Visibility API)
该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。
3. getUserMedia API
该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。
4. 电池API(Battery API)
这是一个针对移动设备应用程序的API,主要用于检测设备电池信息。
5. Link Prefetching
预加载网页内容,为浏览者提供一个平滑的浏览体验。
1.
该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。
Javascript代码
- //
找到适合浏览器的全屏方法 - 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 page - launchFullScreen(document.getElementByIdx_x("videoElement"));
// any individual element
2.
该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。
Javascript代码
- //
设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀 - //
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.
该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。
Javascript代码
- //
设置事件监听器 - window.addEventListener("DOMContentLoaded",
function() { -
// 获取元素 -
var canvas = document.getElementByIdx_x("canvas"), -
context = canvas.getContext("2d"), -
video = document.getElementByIdx_x("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,主要用于检测设备电池信息。
Javascript代码
- 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.
预加载网页内容,为浏览者提供一个平滑的浏览体验。
Html代码
-
- <</span>link
rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> -
-
- <</span>link
rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
0 0
- html5的几个Webapi
- html5带来的新的webApi
- AngularJS 2调用.net core WebAPI的几个坑
- html5的几个简单例子
- input的几个html5属性
- 用ASP.NET(WebForm模式)开发WebAPI的几个常用方法
- 学习 HTML5 最好的几个网站
- 学习HTML5游戏开发的几个重要内容
- 7.几个常用的特殊标签(html5)
- 关于HTML5 data-*属性的几个坑
- html5中表单的几个新样式
- webapi的使用
- webapi的使用
- C# webAPI的使用
- webapi 基于bitmask的
- 调用webapi的方法
- WebAPI
- webApi
- 关于RK3288_M180_红外输入_投币输入IO使用说明
- 判断用户选择的日期是否为星期一
- 理解Java中的多态
- 总结前端面试过程中最容易出现的问题
- 使用Qt编写模块化插件式应用程序
- html5的几个Webapi
- JAVA IO-文件流
- Spring Data JPA自定义native 查询
- Ajax实战项目3 验证用户的唯一性 环境(Ajax+Jquery+Json+struts2)
- 无法远程连接(ssh)
- MySQL实时统计脚本--计算QPS,TPS和线程连接数等
- 车道线检测(opencv)
- Shiro容易误解的地方
- Android三级图片缓存框架思路【附练习Demo】