OneYoung

Appearance

3-1.userAgent ​

navigator.userAgent 属性返回浏览器的 User Agent 字符串，表示用户设备信息，包含了浏览器的厂商、版本、操作系统等信息。

js
// chrome浏览器下
console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

3-2.platform ​

navigator.platform 属性返回用户的操作系统信息，比如 MacIntel、Win32、Linux x86_64等。

js
// mac下
console.log(navigator.platform) // MacIntel

3-2.onLine ​

navigator.onLine 属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。

有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的 onLine 属性会返回true，所以不能假定只要是true，用户就一定能访问互联网。

不过，如果是 false，可以断定用户一定离线。

用户变成在线会触发 online 事件，变成离线会触发 offline 事件。

您现在的网络状态是:

html
<p style="font-weight: bold;">您现在的网络状态是: <span id="span" style="color: red;"></span></p>

<script>
  window.onload = function () {
    var span = document.querySelector('#span')
    span.innerText = window.navigator.onLine ? 'online' : 'offline'
  }
  window.addEventListener('online', () => {
    var span = document.querySelector('#span')
    span.innerText = 'online'
  })
  window.addEventListener('offline', () => {
    var span = document.querySelector('#span')
    span.innerText = 'offline'
  })
</script>

3-3.language ​

navigator.language 属性返回一个字符串，表示浏览器的首选语言。该属性只读。

navigator.languages 属性返回一个数组，表示用户可以接受的语言。

navigator.language 总是这个数组的第一个成员。

HTTP 请求头信息的 Accept-Language 字段，就来自这个数组:

TIP

另外，需要判断用户端的浏览器语言，可使用 navigator.language 属性。

而且该属性不会受用户自定义浏览器配置的影响，只跟不同区域的浏览器版本相关。

即如果在中文网站下载了 chrome 浏览器，则该属性会是 zh-CN。即使在设置里更改语言，该属性也不会变动。

除非在英文网站下载了 chrome 浏览器，则该属性会是 en。

3-4.geolocation ​

navigator.geolocation 属性返回一个 Geolocation 对象，用来获取用户地理位置信息。

WARNING

注意，该 API 只有在 HTTPS 协议下可用，否则调用下面方法时会报错。

Geolocation 对象提供下面三个方法。

  1. getCurrentPosition()：得到用户的当前位置。
  2. watchPosition()：监听用户位置变化。
  3. clearWatch()：取消 watchPosition() 方法指定的监听函数。

注意，调用这三个方法时，浏览器会跳出一个对话框，要求用户给予授权。