首頁 > web前端 > H5教程 > HTML5新特性之行動裝置API

HTML5新特性之行動裝置API

黄舟
發布: 2017-03-30 11:47:00
原創
1944 人瀏覽過

為了更好地為行動裝置服務,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方法一樣。

一旦使用者位置改變,就會呼叫回呼函數。

如果要取消監聽,則使用clearWatch方法。

navigator.geolocation.clearWatch(watchID);
登入後複製

2、Vibration APIVibration介面用於在瀏覽器中發出指令,使得裝置振動。由於此操作很耗電,在低電量時最好取消此操作。

###使用下面的程式碼檢查該介面是否可用。目前,只有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的一种应用是,我们可以针对亮度的强弱来改网页背景和文字颜色。

以上是HTML5新特性之行動裝置API的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板