转行学前端的第 60 天 : 了解 BOM navigator 对象相关

小又又
3,191 阅读9分钟

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

昨天基于搜索来基础学习 BOM location 对象 和 URL 接口。今天主要是基于搜索来学习 BOM navigator 对象 ，又是适合学习的一天，加油，小又又！！！！

what

Navigator 接口表示用户代理的状态和标识。 它允许脚本查询它和注册自己进行一些活动。

可以使用只读的 window.navigator 属性检索navigator对象。

属性

不从NavigatorID, NavigatorLanguage, NavigatorOnLine, NavigatorGeolocation, NavigatorPlugins, NavigatorUserMedia, 和 NetworkInformation 中继承任何属性，但是实现了定义在这些对象中的如下属性。

属性速览

属性名 属性说明
Navigator.activeVRDisplays 只读 筛选所有的 VRDisplay 对象，把其中所有 VRDisplay.ispresenting 属性的值为 true 的对象以数组的形式返回。
NavigatorID.appCodeName 只读 返回当前浏览器的内部“开发代号”名称。 不能保证此属性返回的值是正确的。
NavigatorID.appName 只读 以 DOMString 的形式返回浏览器官方名称。 不能保证此属性返回的值是正确的。
NavigatorID.appVersion 只读 以 DOMString 的形式返回浏览器版本。不能保证此属性返回的值是正确的。
Navigator.battery 只读 返回一个 BatteryManager 对象，你可以用它来获取一些电池充电状态的信息。
Navigator.connection 只读 提供一个 NetworkInformation 对象来获取设备的网络连接信息。
Navigator.cookieEnabled 只读 当忽略 cookie 时返回 false，否则返回 true
Navigator.geolocation 只读 返回一个 Geolocation 对象，据之可访问设备的地理位位置信息。
NavigatorConcurrentHardware.hardwareConcurrency 只读 返回可用的逻辑处理器内核数。
NavigatorPlugins.javaEnabled 只读 返回 Boolean 表明浏览器是否支持 Java。
Navigator.keyboard 只读 返回一个键盘对象，该对象提供对从物理键盘检索键盘布局图和切换按键捕获的函数的访问。
NavigatorLanguage.language 只读 返回 DOMString 表示用户的首先语言，通常是浏览器用户界面的语言。当未知的时，返回 null。
NavigatorLanguage.languages 只读 返回一个表示用户已知语言的 DOMString 数组，并按优先顺序排列。
NavigatorPlugins.mimeTypes 只读 , Navigator.locks 只读 返回LockManager对象，该对象提供用于请求新锁对象和查询现有锁对象的方法
Navigator.mediaCapabilities 只读 返回MediaCapabilities对象，该对象可以公开有关给定格式和输出功能的解码和编码功能的信息。
Navigator.maxTouchPoints 只读 返回当前设备支持的同时接触点的最大数目。返回 MimeTypeArray 数组用于列举浏览器所支持的 MIME 类型。
NavigatorOnLine.onLine 只读 返回 Boolean 来表明浏览器是否联网。
Navigator.oscpu 返回当前操作系统名。
Navigator.permissions 只读 返回一个 Permissions 对象，该对象可用于查询和更新 Permissions API 涵盖的 API 的权限状态。
NavigatorID.platform 只读 返回浏览器平台名，不确定此值是否有效。
NavigatorPlugins.plugins 只读 返回 PluginArray 数组用于列举出浏览器安装的插件。
NavigatorID.product 只读 在任意浏览器下都只返回'Gecko'，此属性只用于兼容的目的。
Navigator.serviceWorker 只读 返回 ServiceWorkerContainer 对象用于提供注册、删除、更新以及为了 associated document 的 ServiceWorker 对象之间的通信。
NavigatorStorage.storage 只读 返回singleton StorageManager对象，该对象用于管理持久性权限并根据站点/应用程序估计可用存储空间。
NavigatorID.userAgent 只读 返回当前浏览器的用户代理。

常用属性了解

Navigator.userAgent

navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。

基于检测 user agent 字符串来辨识浏览器是不可靠的，不推荐使用，因为 user agent 字符串是用户可配置的。例如：

var ua = navigator.userAgent;

这个字符串的格式并无统一规定，也无法保证未来的适用性，各种上网设备层出不穷，难以穷尽。

所以，现在一般不再通过它识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的 JavaScript 功能。

不过，通过userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

如果想要识别所有移动设备的浏览器，可以测试更多的特征字符串。

/mobi|android|touch|mini/i.test(ua)

Navigator.plugins

Navigator.plugins属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等。

var plugins = navigator.plugins

Navigator.platform

返回一个字符串,表示浏览器所在的系统平台类型.

platform 可能是: "Win32", "Linux i686", "MacPPC", "MacIntel", 等.

platform = navigator.platform

Navigator.onLine

返回浏览器的联网状态。正常联网（在线）返回 true，不正常联网（离线）返回 false。

一旦浏览器的联网状态发生改变，该属性值也会随之变化。

当用户点击链接或者脚本进行网络请求时，如果发现浏览器连接不上互联网，则该属性会被赋值为false。

各浏览器对该属性的实现有些不同。

在 Chrome 和 Safari 中，如果浏览器连接不上局域网（LAN）或者路由器，就是离线状态；否则就是在线状态。

  • 当该属性值为 false 的时候，你可以说浏览器不能正常联网，
  • 但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。

还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。

online = window.navigator.onLine;

如果你想得到浏览器确切的联网状态，应该使用其他额外的检查手段。

在 Firefox 和 Internet Explorer 中，如果浏览器处于"脱机工作"状态，则返回 false。

在 Firefox 41之前，所有其他条件都返回 true 值；在 Windows 上的 Nightly 68上测试实际行为表明，它仅查找类似 Chrome 和 Safari 的 LAN 连接，从而产生误报。

你可以在 window.ononline 和 window.onoffline上监听事件，来获取浏览器联网状态的改变情况。

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})

Navigator.language

NavigatorLanguage.language 只读属性返回一个表示用户偏好语言的字符串，通常指浏览器 UI 的语言。

let lang = navigator.language;

一个 DOMString。lang 存储一个表示语言版本（在 BCP 47 中定义）的字符串。合法的语言版本有 "zh-CN"、"en"、"en-US"、"fr"、"es-ES" 等。

注意 macOS 和 iOS 平台上的 Safari（10.2 之前版本），国家代码为小写："zh-cn"、"en-us"、"fr-fr" 等。

Navigator.languages

只读属性 NavigatorLanguage.languages 返回一个 DOMString 的数组，数组内容表示网站访客所使用的语言。

在每一个HTTP请求上的来自用户浏览器的HTTP协议头 Accept-Language 使用相同的来自 navigator.languages 属性的语言值，除了特殊的 qvalues （权重值） 字段 （如：en-US;q=0.8）。

preferredLanguages = globalObj.navigator.languages

Navigator.geolocation

Navigator.geolocation 只读属性返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息。

使网站或应用可以根据用户的位置提供个性化结果。

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

navigator.geolocation

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

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

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

出于安全考虑，当网页请求获取用户位置信息时，用户会被提示进行授权。注意不同浏览器在请求权限时有不同的策略和方式。Windows10在未开启定位的情况下无法获取位置

Navigator.cookieEnabled

navigator.cookieEnabled 返回一个布尔值，来表示当前页面是否启用了 cookie。本属性为只读属性。

let cookieEnabled = navigator.cookieEnabled;

注意，这个属性反映的是浏览器总的特性，与是否储存某个具体的网站的 Cookie 无关。

用户可以设置某个网站不得储存 Cookie，这时cookieEnabled返回的还是true。

方法

Navigator.javaEnabled()

Navigator.javaEnabled()方法返回一个布尔值，表示浏览器是否能运行 Java Applet 小程序。

navigator.javaEnabled()

NavigatorUserMedia.getUserMedia()

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。

此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

通常你可以使用 navigator.mediaDevices 来获取 MediaDevices ，例如


const constraints = {
  audio: true,
  video: { width: 1280, height: 720 }
};
const mPromise = navigator.mediaDevices.getUserMedia(constraints);

navigator.registerProtocolHandler()

Navigator 方法 registerProtocolHandler() 让web站点为自身注册能用于打开或处理特定URL schemes（aka protocols）的功能。

举个例子，这个API可以让电子邮件站点打开 mailto: 类的URL，或者让VoIP站点打开 tel: 类的URL。

navigator.registerProtocolHandler(scheme, url, title);

navigator.registerProtocolHandler("web+burger",
                                  "https://jsconsole.com/?uri=%s",
                                  "Burger handler");

这就创建了一个处理器,其允许以web+burger://链接去将用户导向到你的web应用,并且将burger信息插入了到该处理器所指定的链接中(译者按:替换链接中"%s"的占位符).

重申一下,这个脚本必须在同一域下运行(本例中就是指所有的jsconsole.com下的页面)而且第二个参数必须是以"http"或者"https"协议标记作为开头的链接(本例中是https).

用户会被告知你的代码请求注册协议处理器,所以他们可以选择允许或者拒绝

允许的协议标记

出于安全考虑，registerProtocolHandler() 严格限制了允许注册的协议标记。

以 web+ 作为前缀的方式可以注册一个自定义的标记协议，至少要有5个字符的长度(包括 web+ 前缀)，而且只能使用小写的ASCII字母作为名称。例如 web+burger ，如下面的示例所示。

除此之外，还可以使用下文所列的白名单中的协议标记:

  • bitcoin
  • geo
  • im
  • irc
  • ircs
  • magnet
  • mailto
  • mms
  • news
  • nntp
  • openpgp4fpr
  • sip
  • sms
  • smsto

今日学习总结

今日心情

今日主要是基于搜索来基础学习 BOM navigator 对象，希望明天学到更多的内容~~~~

本文使用 mdnice 排版

avatar
文章
阅读
粉丝