🀢

用户代理的状态和身份

属性	描述
activeVrDisplays	返回数组，包含 ispresenting 属性为 true 的 VRDisplay 实例
appCodeName	返回浏览器的代码名
appMinorVersion	返回浏览器的次级版本
appName	返回浏览器的名称
appVersion	返回浏览器的平台的版本信息
battery	返回暴露 Battery Status API 的 BatteryManager 对象
buildId	浏览器的构建编号
browserLanguage	返回浏览器的当前的语言
connection	返回暴露 Network Information API 的 NetworkInformation 对象
cookieEnabled	返回指明浏览器中是否启用 Cookie 的布尔值
credentials	返回暴露 Credentials Management API 的 CredentialsContainer 对象
cpuClass	返回浏览器的 cpu 等级
deviceMemory	返回单位为 GB 的设备内存容量
doNotTrack	返回用户的"不跟踪"（ do-not-track ）设置
geolocation	返回暴露 Geolocation API 的 Geolocation 对象
getVRDisplays()	返回数组，包含可用的每个 VRDisplay 实例
getUserMedia()	返回与可用媒体设备硬件关联的流
hardwareConcurrency	返回设备的处理器核心数量
javaEnabled	返回布尔值，表示浏览器是否启用了 Java
language	返回浏览器的主语言
locks	返回暴露 Web Locks API 的 LockManager 对象
mediaCapabilities	返回暴露 Media Capabilities API 的 MediaCapabilities 对象
mediaDevices	返回可用的媒体设备
maxTouchPoints	返回设备触摸屏支持的最大触点数
mimeTypes	返回浏览器中注册的 MIME 类型数组
onLine	返回指明系统是否处于脱机模式的布尔值
oscpu	返回浏览器运行设备的操作系统和（或） CPU
permissions	返回暴露 Permissions API 的 Permissions 对象
platform	返回运行浏览器的操作系统平台
plugins	返回浏览器安装的插件数组。在 IE 中，这个数组包含页面中所有`<embed>`元素
product	返回产品名称（通常是 "Gecko"）
productSub	返回产品的额外信息（通常是 Gecko 的版本）
registerProtocolHandler()	将一个网站注册为特定协议的处理程序
requestMediaKeySystemAccess()	返回一个期约，解决为 MediaKeySystemAccess 对象
sendBeacon()	异步传输一些小数据
serviceWorker	返回用来与 ServiceWorker 实例交互的 ServiceWorkerContainer
share()	返回当前平台的原生共享机制
storage	返回暴露 Storage API 的 StorageManager 对象
systemLanguage	返回 OS 使用的默认语言
userAgent	返回由客户机发送到服务器的 user-agent 头部的值
vendor	返回浏览器的厂商名称
vendorSub	返回浏览器厂商的更多信息
vibrate()	触发设备振动
webdriver	返回浏览器当前是否被自动化程序控制
userLanguage	返回 OS 的自然语言 </td>

✂️

let str = '';
str += '<table style="color: #880088">';
str += '';
str += '<tr><td>appName</td><td>' + navigator.appName + '</td></tr>';
str += '<tr><td>appCodeName</td><td>' + navigator.appCodeName + '</td></tr>';
str += '<tr><td>appVersion</td><td>' + navigator.appVersion + '</td></tr>';
str += '<tr><td>language</td><td>' + navigator.language + '</td></tr>';
str +=
  '<tr><td>cookieEnabled</td><td>' + navigator.cookieEnabled + '</td></tr>';
str += '<tr><td>cpuClass</td><td>' + navigator.cpuClass + '</td></tr>';
str += '<tr><td>onLine</td><td>' + navigator.onLine + '</td></tr>';
str += '<tr><td>platform</td><td>' + navigator.platform + '</td></tr>';
str +=
  '<tr><td>No of Plugins</td><td>' + navigator.plugins.length + '</td></tr>';
str += '';
document.querySelector('#navigatorShow').innerHTML = str;

使用 window.navigator 属性可以返回一个 navigator 对象，该对象包含了一些方法、属性和集合等成员，使用下面的 for … in 循环代码可以检测这些成员，并查看它们的值：

✂️

for (i in window.navigator) {
  console.log(i + ' ===' + window.navigator[i] + ' ');
}

检测浏览器类型

类型，从而可以做出不同的兼容性处理。一般可以使用下面的代码检测浏览器的类型，根据检测结果做出不同的回应：

✂️

var appVersion = window.navigator.appVersion;
var isIE = appVersion.indexOf(' MSIE') != -1 ? true : false;
var isWin = appVersion.toLowerCase().indexOf(' win') != -1 ? true : false;
var isOpera = navigator.userAgent.indexOf(' Opera') != -1 ? true : false;
if (isIE && isWin && !isOpera) {
  window.alert('这是 IE 浏览器！');
} else if (isOpera) {
  window.alert('这是 Opera 浏览器！');
} else {
  window.alert('这是 FireFox 浏览器或者网景浏览器！');
}

这里用到了 navigator.appVersion 属性，该属性返回一个字符串，其中包含了关于浏览器版本的信息。

下面是一些经常使用的判断代码：

✂️

var ua = navigator.userAgent.toLowerCase();
var clientInfo = {
  isStrict: document.compatMode == ' CSS1Compat',
  isOpera: ua.indexOf(' opera') > -1,
  isIE: ua.indexOf(' msie') > -1,
  isIE7: ua.indexOf(' msie 7') > -1,
  isIE8: ua.indexOf(' msie 8') > -1,
  isIE9: ua.indexOf(' msie 9') > -1,
  isSafari: /webkit|khtml/.test(ua),
  isWindows: ua.indexOf(' windows') != -1 || ua.indexOf(' win32') != -1,
  isMac: ua.indexOf(' macintosh') != -1 || ua.indexOf('mac os x') != -1,
  isLinux: ua.indexOf(' linux') != -1,
};
clientInfo.isBorderBox = clientInfo.isIE && !clientInfo.isStrict;
clientInfo.isSafari3 = clientInfo.isSafari && !!document.evaluate;
clientInfo.isGecko = ua.indexOf(' gecko') != -1 && !clientInfo.isSafari;
/* 是否正在用 IE6 */
var isIE6 =
  clientInfo.isIE &&
  !clientInfo.isIE7 &&
  !clientInfo.isIE8 &&
  !clientInfo.isIE9;

自定义架构处理

使用 window.navigator.registerProtocolHandler()方法可以将自己注册为特定架构（通信协议）的处理者。目前仅 Firefox 浏览器支持该方法。

该方法的语法格式如下：

✂️

window.navigator.registerProtocolHandler(scheme, url, title);

参数 scheme 是想要处理的架构的名称，用字符串表示。

参数 url 是要给处理器处理的 URL 地址字符串。可以在字符串里用" %s"来代表一个占位符，用于表示将被处理的内容的 URL 地址。

参数 title 是处理器的标题，会以字符串的形式呈现给使用者。

例如，下面的代码将建立一个处理器，它允许 mailto 的链接将使用者带到一个自定义的邮件地址，将链接中指定的 E-mail 地址插入到 URL ：

✂️

html

<body>
  <a href="mailto:letmiseesee@gmail.com">给我发邮件 </a>
  <script>
    window.navigator.registerProtocolHandler(
      ' mailto',
      'http: //localhost/?mail=%s',
      ' MyMail',
    );
  </script>
</body>

自定义内容类型处理

使用 registerContentHandler()方法可以为特定 MIME 类型的内容自定义处理器，例如 Firefox 浏览器能够添加 RSS 类型的内容给自定义的处理器处理。目前尚无浏览器支持该方法。

该方法的语法格式如下：

✂️

window.navigator.registerContentHandler(mimeType, url, title);

参数 mimeType 是想要处理的 MIME 类型的名称，用字符串表示。

参数 url 是要给处理器处理的 URL 地址字符串。可以在字符串里用" %s"来代表一个占位符，用于表示将被处理的内容的 URL 地址。

参数 title 是处理器的标题，会以字符串的形式呈现给使用者。

例如，下面的代码将会建立一个处理器，它允许打开 Excel 文件：

✂️

window.navigator.registerContentHandler(
  ' application/excel',
  'http://localhost/?url=%s',
);

手动处理 storage 独占访问权

如果脚本代码使用了 document.cookie 或者 localStorage ，在一个脚本完成执行之前，浏览器就会阻止其它脚本代码访问 cookie 或 storage 。

使用 navigator.yieldForStorageUpdates()方法可以通知浏览器解除这种阻止。在调用该方法后， cookie 或 storage 就可以被修改，尽管另一个脚本还未完成执行。

该方法的语法格式如下：

✂️

window.navigator.yieldForStorageUpdates();

目前尚无浏览器支持该方法。

检测脱机模式

可以使用 window.navigator.onLine 属性检测浏览器是否处于脱机模式，该属性是一个只读的逻辑值。

例如下面的代码就可以检测系统是否处于脱机模式：

✂️

console.log('当前模式：' + (navigator.onLine ? '在线' : '脱机'));

当用户在浏览器中选择脱机工作的状态后，系统就进入了脱机状态，内容将从缓存进行读取。除此之外，当用户由联机状态进入脱机状态时，就会触发 window 对象的 offline 事件。同样，当用户由脱机状态进入联机状态时，就会触发 window 对象的 online 事件。

可以使用下面的 3种方式之一来声明事件：

对 window 、 document 或 document.body 使用 addEventListener()方法注册监听函数，例如下面的代码：

✂️

window.addEventListener(' offline', func_offline, false);
window.addEventListener(' online', func_online, false);

对 document 或 document.body 使用 ononline 或 onoffline 属性指定监听函数，例如下面的代码：

✂️

document.body.onoffline = func_offline;
document.body.ononline = func_online;

但是，不能使用 window.ononline 和 window.onoffline 属性来设置监听函数。

在 body 元素的 ononline 和 onoffline 属性值中调用指定的事件处理函数

技巧与提示。

目前仅 Firefox 浏览器支持上述 3种事件处理方法，大部分浏览器仅支持对 window 对象使用 addEventListener()方法注册 offline 和 online 监听函数。

W3C 规定也可以使用 window.ononline 和 window.onoffline 属性来设置监听函数，但浏览器都没有实现。

下面的代码演示了如何使用这些 API ：

✂️

html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sample</title>
    <style type="text/css">
       div.online { /_
      在线时显示为绿色 _/ color: #090; font-weight: bold; }
      div.offline {
      /_ 离线时显示为红色_/ color: #F00; font-weight: bold;
      }
    </style>
    <script>
      // 该函数用来检测浏览器状态——离线或者在线
      function updateOnlineStatus() {
        //
        获取离线或者在线;
        var condition = navigator.onLine ? 'online' : 'offline'; //
        根据结果设置显示的内容;
        var status = document.getElementById('status');
        status.setAttribute('class', condition);
        status.innerHTML = condition;
      } //
      当文档加载完成后调用该函数;
      function loaded() {
        // 首先调用函数 updateOnlineStatus()检查一次状态
        updateOnlineStatus(); // 定义离线监听事件，如果触发就调用函数 updateOnlineStatus()
        window.addEventListener(
          'offline',
          function () {
            updateOnlineStatus();
          },
          false,
        ); // 定义在线监听事件，如果触发就调用函数 updateOnlineStatus()
        window.addEventListener(
          'online',
          function () {
            updateOnlineStatus();
          },
          false,
        );
      }
    </script>
  </head>
  <body onload="loaded()">
    <div id="status"></div>
  </body>
</html>

浏览器的检测方法

浏览器检测的常用方法有两种：特征检测和字符串检测。

✂️

var ua = navigator.userAgent.toLowerCase(); // 获取用户端信息
var info = {
  //
  ie: /msie/.test(ua) && !/opera/.test(ua), //匹配 IE 浏览器
  op: /opera/.test(ua), //匹配 Opera 浏览器
  sa: /version.\*safari/.test(ua), //匹配 SaFari 浏览器
  ch: /chrome/.test(ua), //匹配 Chrome 浏览器
  ff: /gecko/.test(ua) && !/webkit/.test(ua), //匹配 FireFox 浏览器
};

获取浏览器插件的数目

✂️

navigator.plugins.length;

navigator 用来检测浏览器的版本、所支持的 MIME 类型、已安装的外挂程序（ plugin ）。

实现对 Windows 、 Mac 、 Linux 、 UNIX 操作系统的判断

✂️

var osType = '',
  windows = navigator.userAgent.indexOf('Windows', 0) != -1 ? 1 : 0,
  mac = navigator.userAgent.toLowerCase().indexOf('mac', 0) != -1 ? 1 : 0,
  linux = navigator.userAgent.indexOf('Linux', 0) != -1 ? 1 : 0,
  unix = navigator.userAgent.indexOf('X11', 0) != -1 ? 1 : 0;

if (windows) osType = 'Windows';
else if (mac) osType = 'Mac';
else if (linux) osType = 'Lunix';
else if (unix) osType = 'Unix';
console.log(osType);

navigator.userAgent 表示用户代理。

使用原生 JavaScript 判断是否是移动设备浏览器

✂️

var mobileReg =
  /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i;
if (mobileReg.test(window.navigator.userAgent.toLowerCase())) {
  alert('移动设备！ ');
} else {
  alert('非移动设备！ ');
}

在 HTML 中， JavaScript 的一些特殊规则可以正确解析，但 XHTML 并不识别，按照 XHTML 的解析规则，" <"号被认为是开始标记，后边不能跟空格。

解决方案之一就是将" <"替换为" <"，但这只是解决燃眉之急的方法。另一种方案就是利用特殊注解的方案，" //<![CDATA["与" //]]>"的组合。

谈到 <script> ，就不得不提及它的同胞兄弟 <noscript>。 <noscript> 在浏览器不支持或禁用客户端脚本时很有用。