您的位置：首页 > 职场人生

讲给Android程序员看的前端教程(36)——Navigator

2017-12-04 09:51 831 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：http://blog.csdn.net/lfdfhl

本文视频教程：http://www.stay4it.com/my/course/37

Navigator概述

JavaScript客户端领域存的顶层对象Window中有一个属性navigator表示对Navigator对象的引用；该对象包含有关浏览器的信息，比如：名称、浏览器的版本、语言、平台等等。在此，我们通过代码查看与浏览器有关的所有属性及其对应的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<script type="text/javascript">
var nav=window.navigator;
var result="浏览器信息<br>";
for(var propertyName in nav){
result=result+propertyName+"："+window.navigator[propertyName]+"<br>";
}
document.writeln(result);
</script>
</body>
</html>

运行后效果图如下所示：

哇哈，这么多属性，记不住啊！没事，正常人都记不住的，所以别太在意；熟知几个常用的即可。如果觉得刚才挨个打印属性的方式觉得繁琐的话，你也可以一句话搞定：

console.log(window.navigator);

直接将信息打印至控制台。

Geolocation

在HTML5中新增geolocation属性，利用该属性可以引用Geolocation对象从而实现定位功能。

Geolocation常用方法如下：

getCurrentPosition(success, error, options)获取设备当前位置。

success表示成功得到位置信息时的回调函数，该函数参数为Position对象

error表示获取位置信息失败时的回调函数，该函数参数为PositionError类型

options该对象用于设置可选参数；比如：可在该参数中设置超时，缓存等

watchPosition(success, error, options)当设备的地理位置发生改变的时候自动调用该方法。该方法的三个参数的含义同getCurrentPosition( )一致，不再赘述。watchPosition( )方法返回一个ID，若需取消监听则可通过 Geolocation.clearWatch( ) 传入该ID实现取消

clearWatch(watchID) 终止监听

在了解Geolocation之后，我们就来动手实现定位，请看如下示例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
} else {
alert("您的浏览器不支持地理定位");
}

// 获取地理位置成功的回调函数
function successCallback(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var timestamp= position.timestamp;
alert("timestamp="+timestamp+"，经度=" + longitude + "，纬度=" + latitude);
}

// 获取地理位置失败的回调函数
function errorCallback(error) {
alert(error.code+" "+ error.message);
}

// 额外信息
var options={
timeout:2000
};
</script>
</body>
</html>

运行后效果图如下所示：

在该示例里，我们在定位成功的回调函数中获取了当前的经度、纬度、获取成功时的时间戳。但是请注意，在使用Geolocation之前最好先判断当前设备是否支持定位，毕竟有的浏览器对于HTML5支持得不够好。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航