JavaScript navigator 对象

在 JavaScript 中，我们可以使用 navigator 对象来获取客户端中 “浏览器” 和 “操作系统” 的相关信息。其中，navigator 对象主要用于：

获取用户的浏览器信息（包括类型、版本等）。
获取用户的操作系统信息。
查询浏览器支持的特性，例如地理定位、在线或离线状态等。

提示： navigator 对象本质上是 “window 对象” 的属性。因此在使用时，可以省略 “window.” 前缀。

JavaScript navigator 对象的属性

在 JavaScript 中，navigator 对象提供了很多属性，常用的如下表所示。

navigator 对象的常用属性
属性	说明
userAgent	获取浏览器的详细信息
language	获取浏览器首选的语言设置，比如 "en-US" 或 "zh-CN" 等
onLine	表示当前浏览器是否处于 “在线” 状态（是否连接到网络），是一个布尔值
cookieEnabled	表示浏览器是否启用了 Cookie，是一个布尔值
clipboard	用于实现 “复制到剪贴板” 功能
geolocation	用于获取用户的地理位置（需要用户授权）

示例 1：使用 navigator 获取浏览器信息

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("详细信息：", navigator.userAgent);
        console.log("操作系统：", navigator.platform);
    </script>
</body>
</html>

运行结果如下。

详细信息：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
操作系统：Win32

分析：

通过 navigator.userAgent，我们可以获取用户所用浏览器的详细信息。如果你想要判断浏览器是 Chrome 还是 Firefox，可以这样来做：

const agent = navigator.userAgent;
if (agent.includes("Chrome")) {
    console.log("用户正在使用 Chrome 浏览器。");
} else if (agent.includes("Firefox")) {
    console.log("用户正在使用 Firefox 浏览器。");
}

实际上，上面这种判断代码是不够的，因为 Edge、Opera 等浏览器的内核都是基于 Chromium 的，它们的 userAgent 里也包含 “Chrome” 这个字符串。在实际开发中，推荐直接使用成熟的第三方库（比如 UAParser.js）来判断浏览器类型。

示例 2：使用 navigator 获取浏览器状态

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("是否在线：", navigator.onLine);
        console.log("启用 Cookie：", navigator.cookieEnabled);
        console.log("首选语言：", navigator.language);
    </script>
</body>
</html>

运行结果如下。

是否在线：true
启用 Cookie：true
首选语言：zh-CN

示例 3：复制到剪贴板

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <textarea name="txt" id="txt" placeholder="请输入内容"></textarea>
    <button id="copy">复制</button>
    <script>
        const oTxt = document.getElementById("txt");
        const oCopy = document.getElementById("copy");

        oCopy.addEventListener("click", function() {
            const text = oTxt.value;

            navigator.clipboard.writeText(text).then(() => {
                alert("复制成功！");
            }).catch(() => {
                alert("复制失败，请手动复制");
            });
        });
    </script>
</body>
</html>

页面效果如下图所示。

navigator.clipboard 实现复制功能

分析：

我们尝试在文本框中输入一段字符串，然后点击【复制】按钮，就可以把文本框的内容复制到剪贴板上了。

这种方式非常有用，实际上绿叶网上面的代码复制功能，就是使用 navigator.clipboard 来实现的。

JavaScript navigator 对象的方法

在 JavaScript 中，navigator 对象主要用于读取信息，不过它也提供了一个有用的方法。其中，我们可以使用 navigator.sendBeacon() 方法来在浏览器卸载文档（页面关闭或跳转）时，异步地将少量数据发送到 Web 服务器。

示例 4：使用 navigator.sendBeacon() 发送页面统计数据

const url = "/api/collect";
const data = JSON.stringify({
    "page_load_time": 500,
    "platform": navigator.platform
});

// 当页面变为 “隐藏” 状态（关闭标签、切换标签、最小化窗口）时触发
document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        navigator.sendBeacon(url, data);
    }
});

使用 navigator.sendBeacon() 方法发送一些点击量、性能指标等统计数据非常有用，并且它也不会阻塞页面卸载。