在ClojureScript/Reagent程序中如何获取浏览器navigator对象？

嘿，刚上手ClojureScript/Reagent的时候，确实容易在访问浏览器原生对象上卡壳——不过这个问题解决起来超简单，我给你一步步说清楚：

核心逻辑其实很简单：ClojureScript通过js/命名空间直接映射浏览器的全局JS环境，所以我们可以直接拿到navigator对象。

1. 最直接的访问方式 #

直接用js/navigator就能获取到浏览器的navigator实例，比如读取常用属性：

;; 获取浏览器的User Agent字符串
(.-userAgent js/navigator)

;; 获取当前浏览器的首选语言
(.-language js/navigator)

;; 检查浏览器是否在线
(.-onLine js/navigator)

在Reagent组件里使用也毫无压力，直接把这些代码放到组件的渲染函数里就行——因为Reagent组件是在浏览器DOM挂载后才会执行渲染，这时候肯定能访问到浏览器的全局对象：

(defn browser-details []
  [:div
   [:h4 "当前浏览器信息"]
   [:p "User Agent: " (.-userAgent js/navigator)]
   [:p "语言设置: " (.-language js/navigator)]
   [:p "在线状态: " (if (.-onLine js/navigator) "在线" "离线")]])

2. 调用navigator的方法 #

如果要调用navigator上的方法（比如获取地理位置、权限申请），用ClojureScript的JS方法调用语法就可以：

;; 示例：获取当前地理位置
(.getCurrentPosition js/navigator.geolocation
  ;; 成功回调
  (fn [pos]
    (let [coords (.-coords pos)]
      (println "纬度：" (.-latitude coords))
      (println "经度：" (.-longitude coords))))
  ;; 失败回调
  (fn [err]
    (println "获取位置失败：" (.-message err))))

3. 避免非浏览器环境报错（可选） #

如果你的代码可能在非浏览器环境运行（比如用Node.js做单元测试），可以先判断navigator是否存在，避免抛出错误：

(when (exists? js/navigator)
  (println "当前浏览器UA：" (.-userAgent js/navigator)))

另外，你也可以通过js/window.navigator来访问，效果和js/navigator完全一致，只是更明确地指向window对象下的navigator属性。

为啥你会觉得“无法访问”？ #

大概率是这两种情况：

• 你在非浏览器环境执行了代码（比如用Node.js跑编译后的JS文件），这种环境下本来就没有navigator对象
• 你在命名空间的顶层代码里直接访问navigator（比如组件定义之外），虽然一般不会有问题，但如果是在某些特殊的编译/加载时机，可能会出现未定义的情况——把访问逻辑放到Reagent组件里就完全没问题了。

内容的提问来源于stack exchange，提问作者interstar