HTML5新特性之移动设备API
为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API。
1、Geolocation API
Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制(比如IP地址、WIFI热点等)。
下面的方法,可以检查浏览器是否支持这个接口。
if (navigator.geolocation) {
// 支持
} else {
//不支持
}
1.1 getCurrentPosition方法
getCurrentPosition方法,用来获取用户的地理位置。使用它需要得到用户的授权,浏览器会跳出一个对话框,询问用户是否许可当前页面获取他的地理位置。必须考虑两种情况的回调函数:一种是同意授权,另一种是拒绝授权。如果用户拒绝授权会抛出一个错误。
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
上面代码指定了处理当前地址位置的两个回调函数。
(1)同意授权
如果用户同意授权,就会调用geoSuccess。
function geoSuccess(event) {
var coords = event.coords;
console.log('latitude: ' + coords.latitude); //纬度
console.log('longitude: ' + coords.longitude); //经度
console.log('accuracy: ' + coords.accuracy); //精度
console.log('altitude: ' + coords.altitude); //海拔
console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度(单位:米)
console.log('heading: ' + coords.heading); //以360度表示的方向
console.log('speed: ' + coords.speed); //每秒的速度(单位:米)
}
geoSuccess的参数是一个event对象。event.coords属性指向一个对象,包含了用户的位置信息,主要是以下几个值:
- coords.latitude:纬度
- coords.longitude:经度
- coords.accuracy:精度
- coords.altitude:海拔
- coords.altitudeAccuracy:海拔精度(单位:米)
- coords.heading:以360度表示的方向
- coords.speed:每秒的速度(单位:米)
(2)拒绝授权
如果用户拒绝授权,就会调用geoError。
function geoError(event) {
console.log('Error code ' + event.code + '. ' + event.message);
}
geoError的参数也是一个event对象。event.code属性表示错误类型,有四个值:
- 0:未知错误,浏览器没有提示出错的原因,相当于常量event.UNKNOWN_ERROR。
- 1:用户拒绝授权,相当于常量event.PERMISSION_DENIED
- 2:没有得到位置,GPS或其他定位机制无法定位,相当于常量event.POSITION_UNAVAILABLE。
- 3:超时,GPS没有在指定时间内返回结果,相当于常量event.TIMEOUT。
event.message为错误提示信息。
(3)设置定位行为
getCurrentPosition方法还可以接受一个对象作为第三个参数,用来设置定位行为。
var option = {
enableHighAccuracy: true,
timeout: Infinity,
maximumAge: 0
}; navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);
这个参数对象有三个成员:
- enableHighAccuracy:如果设为true,就要求客户端提供更精确的位置信息,这会导致更长的定位时间和更大的耗电,默认设置为false。
- timeout:等待客户端做出回应的最大毫秒数,默认值为Infinity(无限)。
- maxinumAge:客户端可以使用缓存数据的最大毫秒数。如果设为0,客户端不读取缓存;如果设为infinity,客户端只读取缓存。
1.2 watchPosition方法和clearWatch方法
watchPosition方法可以用来监听用户位置的持续改变,使用方法与getCurrentPosition方法一样。
var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);
一旦用户位置发生改变,就会调用回调函数。
如果要取消监听,则使用clearWatch方法。
navigator.geolocation.clearWatch(watchID);
2、Vibration API
Vibration接口用于在浏览器中发出命令,使得设备振动。由于该操作很耗电,在低电量时最好取消该操作。
使用下面的代码检查该接口是否可用。目前,只有Chrome和Firefox的Android平台最新版本支持它。
navigator.vibrate = navigator.vibrate ||
navigator.webkitVibrate ||
navigator.mozVibrate ||
navigator.msVibrate; if (navigator.vibrate) {
// 支持
}
vibrate方法可以使得设备振动,它的参数就是振动持续的毫秒数。
navigator.vibrate(1000);
上面的代码使得设备振动1秒钟。
vibrate方法还可以接受一个数组作为参数,表示振动的模式。偶数位置的数组成员表示振动的毫秒数,奇数位置的数组成员表示等待的毫秒数。
navigator.vibrate([500, 300, 500]);
上面代码表示,设备先振动500毫秒,然后等待300毫秒,再接着振动500毫秒。
vibrate是一个非阻塞式的操作,即手机振动的同时,JavaScript代码继续向下运行。要停止振动,只有将0毫秒传入vibrate方法。
navigator.vibrate(0);
3、亮度调节
当移动设备的亮度传感器,感知外部亮度发生显著变化时,会触发devicelight事件。目前,只有Firefox布署了这个API。
window.addEventListener('devicelight', function(event) {
console.log(event.value + 'lux');
})
下面代码表示,devicelight事件的回调函数,接受一个事件对象作为参数。该对象的value属性就是亮度值。
这种API的一种应用是,我们可以针对亮度的强弱来改网页背景和文字颜色。
4、参考链接
[1] Ryan Stewart, Using the Geolocation API
[2] Rathnakanya K. Srinivasan, HTML5 Geolocation
[3] Craig Buckler, How to Use the HTML5 Vibration API
[4] Tomomi Imura, Responsive UI with Luminosity Level
[5] Ruanyf, 移动设备API
HTML5新特性之移动设备API的更多相关文章
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 关于自我总结的html5新特性
最近本包子制订了一个学校计划,第一步就是了解并总结一下html5现在所含有的新特性,好吧,这只是一个了解,- -! 自己总结了一个word文档,里面很多东西自己都还没实际用过,下一步,本包子要写pc端 ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性:FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
随机推荐
- 微软BI 之SSIS 系列 - 再谈Lookup 缓存
开篇介绍 关于 Lookup 的缓存其实在之前的一篇文章中已经提到了 微软BI 之SSIS 系列 - Lookup 组件的使用与它的几种缓存模式 - Full Cache, Partial Cache ...
- 小米Web前端JavaScript面试题
面试题目 一. 请定义这样一个函数 function repeat (func, times, wait) { } 这个函数能返回一个新函数,比如这样用 var repeatedFun = repea ...
- Windows 10四大版本区别详解:家庭版, 专业版, 企业版和教育版
Windows 10有四个基本版本:Windows 10 家庭版, Windows 10 专业版, Windows 10 企业版, 和Windows 10 教育版(这是Windows家族的新成员).以 ...
- 算法练习26-xx
26.左旋转字符串(字符串) 题目:定义字符串的左旋转操作:把字符串前面的若干个字符移动到字符串的尾部. 如把字符串abcdef左旋转2位得到字符串cdefab.请实现字符串左旋转的函数.要求时间对长 ...
- atitit.dw不能显示正确的百分比高度in dw的解决
atitit.dw不能显示正确的百分比高度in dw的解决 div 设置35%的高度,三,不能正确的显示高度...环境dw cs6 但是设置161px奏能ok了...表明这个是dw的一个bug... ...
- TF Boys (TensorFlow Boys ) 养成记(五)
有了数据,有了网络结构,下面我们就来写 cifar10 的代码. 首先处理输入,在 /home/your_name/TensorFlow/cifar10/ 下建立 cifar10_input.py,输 ...
- 更新日志 - 关于 iOS9 设备的安装及其他优化
新版 fir.im 上线整 3 周了,感谢你们对 fir.im 的关注和支持!无以言表,唯有做更好用的产品给大家.本周我们对新版做了以下的功能更新和 bug 修复: 功能更新 在使用过程中,请注意: ...
- C#:Oracle数据库带参PLSQL语句的正确性验证
在有Oracle数据库C#项目中,有一个这样的需求:在界面上配置了带参数的PLSQL语句,但是要通过程序验证其正确性,那么该如何实现?这就是本文要探讨的内容. 一:通过OracleCommand对象的 ...
- Ninja Blocks物联网平台简介
Ninja Blocks是一个物联网控制平台,其平台架构包括硬件层.处理器层.软件层以及平台层,请看下图: 最底层是硬件层,包括传感器(Sensors)和驱动器(Actuators),例如温度传感器. ...
- ffmpeg mp3 to m3u8
ffmpeg -i Sunshine.mp3 -c:a libmp3lame -b:a 128k -map 0:0 -f segment -segment_time 10 -segment_list ...