JavaScript navigator 对象-代码号

navigator 对象：识别用户浏览器与环境

写前端代码时，经常遇到这样的问题：这个功能在 Chrome 上跑得好好的，怎么到了某浏览器上就报错了？或者，我需要根据用户的操作系统来展示不同的下载链接。这些场景的解决方案，都离不开 navigator 对象。

navigator 对象存储了关于浏览器的各种信息，包括名称、版本、运行平台、是否联网、是否支持 Cookie 等。通过它，我们可以在代码中判断当前环境，做出不同的处理。

和之前讲过的 history、location 一样，navigator 也是 window 的属性，可以直接通过 navigator 或 window.navigator 访问。

为什么需要 navigator？

早期的 Web 开发中，不同浏览器对同一段 JavaScript 代码的执行结果可能不同。开发者需要识别用户用的是什么浏览器，然后针对性地写不同的代码。虽然现在浏览器标准趋于统一，但 navigator 依然在很多场景下发挥作用：

根据操作系统显示不同的下载按钮（Windows 版 / Mac 版）
检测用户是否启用了 Cookie，如果没启用则给出提示
判断当前网络状态，离线时显示缓存内容
识别移动端还是 PC 端，加载不同的布局

个人见解：现在很多开发者喜欢用“能力检测”代替“浏览器检测”——即不直接判断是不是某个浏览器，而是判断这个浏览器是否支持某个特定的 API。这个思路确实更稳健。但有些场景，比如区分 iOS 和 Android 下载链接，依然绕不开 navigator.userAgent 或 navigator.platform。

navigator 常用属性详解

属性	说明	当前实际状态
`appName`	浏览器名称	现在浏览器大多返回 "Netscape"，这个值已经不太可靠
`appVersion`	浏览器版本信息	包含完整版本字符串，可解析使用
`appCodeName`	浏览器代号	基本都是 "Mozilla"，历史遗留问题，参考价值有限
`cookieEnabled`	Cookie 是否启用	返回布尔值，很实用
`userAgent`	用户代理字符串	最详细的信息源，包含浏览器、操作系统、内核等
`language`	浏览器语言	如 "zh-CN"、"en-US"，适用于国际化的站点
`platform`	操作系统平台	如 "Win32"、"MacIntel"、"Linux x86_64"
`onLine`	浏览器是否联网	返回布尔值，注意这个值仅表示浏览器认为自己在线
`plugins`	已安装的插件列表	可以检测是否安装了特定插件（如 Flash）

实用示例：获取并展示浏览器环境信息

下面这个示例可以帮你快速了解当前浏览器提供了哪些信息。你可以直接复制到 HTML 文件中运行。

<!DOCTYPE html>
<html>
<head>
    <title>代码号学习编程 - 浏览器信息检测</title>
</head>
<body>
    <h3>当前浏览器环境信息</h3>
    <div id="browserInfo"></div>
    
    <script>
    function getBrowserInfo() {
        let info = "";
        
        // 常用属性收集
        info += "appName: " + navigator.appName + "<br/>";
        info += "appVersion: " + navigator.appVersion + "<br/>";
        info += "appCodeName: " + navigator.appCodeName + "<br/>";
        info += "cookieEnabled: " + navigator.cookieEnabled + "<br/>";
        info += "language: " + navigator.language + "<br/>";
        info += "userAgent: " + navigator.userAgent + "<br/>";
        info += "platform: " + navigator.platform + "<br/>";
        info += "onLine: " + navigator.onLine + "<br/>";
        
        return info;
    }
    
    document.getElementById("browserInfo").innerHTML = getBrowserInfo();
    </script>
</body>
</html>

运行效果说明：你会在页面上看到类似这样的输出（具体值取决于你的浏览器和系统）：

appName: Netscape
appVersion: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...
appCodeName: Mozilla
cookieEnabled: true
language: zh-CN
userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
platform: Win32
onLine: true

深入：userAgent 的解析与使用

userAgent 是最常被使用的属性，因为它包含了最完整的信息。通过解析这个字符串，我们可以判断浏览器类型、版本、操作系统、设备型号等。

示例：判断用户是否使用移动设备

<script>
function isMobileDevice() {
    let userAgent = navigator.userAgent;
    let mobileKeywords = ["Android", "iPhone", "iPad", "iPod", "Windows Phone", "BlackBerry"];
    
    for (let i = 0; i < mobileKeywords.length; i++) {
        if (userAgent.indexOf(mobileKeywords[i]) > -1) {
            return true;
        }
    }
    return false;
}

function showDeviceType() {
    if (isMobileDevice()) {
        alert("您正在使用移动设备访问，来自代码号学习编程");
    } else {
        alert("您正在使用电脑端访问");
    }
}
</script>
<input type="button" value="检测设备类型" onclick="showDeviceType()" />

示例：检测 Cookie 是否启用

<script>
function checkCookieSupport() {
    if (navigator.cookieEnabled) {
        alert("Cookie 已启用，可以正常保存登录状态");
    } else {
        alert("Cookie 未启用，部分功能可能无常使用，请检查浏览器设置");
    }
}
</script>
<input type="button" value="检测 Cookie 状态" onclick="checkCookieSupport()" />

示例：检测网络连接状态

<script>
function checkOnlineStatus() {
    if (navigator.onLine) {
        alert("当前网络连接正常");
    } else {
        alert("当前处于离线状态，部分功能可能不可用");
    }
}
</script>
<input type="button" value="检测网络状态" onclick="checkOnlineStatus()" />

关于 navigator 方法的说明

navigator 对象也提供了一些方法，但目前多数已经很少使用或已过时：

方法	说明	现状
`javaEnabled()`	检测浏览器是否启用了 Java	现在 Java 在网页端已很少使用，该方法仍存在但意义不大
`taintEnabled()`	检测数据污点是否启用	早在 JavaScript 1.2 时就被弃用，不用再关注

个人经验：在开发中，我用到 navigator 最多的是两个场景：

用 userAgent 判断是 iOS 还是 Android，然后引导用户下载对应的 App
用 onLine 配合 window.addEventListener('online', ...) 和 offline 事件，实现离线时的友好提示

本节课程知识要点

优先用能力检测，而非浏览器检测：判断是否存在某个 API，比判断浏览器名称更可靠。比如想用 localStorage，就写 if (typeof localStorage !== 'undefined')，而不是 if (navigator.userAgent.indexOf('Chrome') > -1)。
userAgent 可以被伪造：浏览器插件、开发者工具都可以修改 userAgent 字符串，所以不要用它来做安全性相关的判断，比如限制某个浏览器才能访问。
onLine 的局限性：navigator.onLine 返回 true 只表示浏览器认为自己连接了网络，不代表一定能访问到你的服务器。比如用户连着 Wi-Fi 但 Wi-Fi 没通网，onLine 可能仍是 true。更稳妥的做法是结合 AJAX 请求做实际连通性检测。
跨浏览器差异：language 和 userLanguage 在不同浏览器中的属性名不同，建议直接用 navigator.language 或 navigator.userLanguage 做兼容处理：

let browserLang = navigator.language || navigator.userLanguage || "en";

个人建议

navigator 是一个“信息型”的对象，它告诉你浏览器的情况，但你不应该依赖它来做关键逻辑。尤其是 userAgent，我曾经见过项目里写了一大段正则去匹配各种浏览器的版本号，维护成本非常高。现在的大趋势是，能用标准 API 解决的，就不要去解析 userAgent。

比如需要判断是不是触mō屏设备，可以用 'ontouchstart' in window 这种能力检测；需要判断是否支持 WebGL，直接检测 WebGLRenderingContext 是否存在。只有在必须区分操作系统或特定浏览器版本时，才考虑使用 navigator 的相关属性。

把 navigator 当作辅助工具，而不是核心逻辑的依赖，代码会更健壮。

本文标签：

JavaScript navigator 对象