Web API 是浏览器原生接口,如 navigator.geolocation,非第三方库;获取位置必须用 getCurrentPosition,仅限 HTTPS/localhost,需用户主动触发,返回坐标或错误码;设备信息中 userAgent 等字段不可靠,hardwareConcurrency 和 devicePixelRatio 更可信;权限逐次授权,需处理拒绝场景。

Web API 是浏览器提供的原生能力,不是第三方库
Web API 指的是浏览器环境自带的一组接口,比如 navigator.geolocation、navigator.userAgent、screen.width 这些,它们不需要引入任何外部脚本就能直接调用。很多人误以为 Web API 是像 axios 那样的工具,其实它和 DOM 操作(document.getElementById)属于同一类——是浏览器给 JS 的“内置权限”。能否用、怎么用,取决于当前上下文(比如是否在 HTTPS 页面、用户是否授权、设备是否支持)。
获取地理位置必须走 navigator.geolocation.getCurrentPosition
这是唯一标准方式,且有强约束:
- 只在 HTTPS 或
localhost下可用;HTTP 页面会静默失败或抛出SecurityError - 必须由用户主动触发(比如点击按钮),不能在页面加载时自动调用,否则 Chrome 会拒绝请求
-
回调函数第一个参数是
Position对象,其中coords.latitude和coords.longitude是核心字段 - 错误回调里常见
code: 1(用户拒绝)、code: 2(位置服务不可用)、code: 3(超时)
简单示例:
button.addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
(pos) => console.log(pos.coords.latitude, pos.coords.longitude),
(err) => console.error('定位失败:', err.code)
);
});
读取设备信息要区分「可读」和「不可靠」字段
很多字段表面能读,实际用途有限:
立即学习“Java免费学习笔记(深入)”;
-
navigator.userAgent可读但已被广泛伪造,不能用于判断真实设备类型 -
screen.width和screen.height是屏幕物理像素,但对响应式布局意义不大;更推荐用window.innerWidth+matchMedia -
navigator.platform和navigator.vendor在现代浏览器中基本失效,Chrome 已统一返回"Win32"或"Linux x86_64" - 真正可靠的是
navigator.hardwareConcurrency(逻辑 CPU 核心数)和devicePixelRatio(像素比),可用于性能适配
权限模型正在收紧,别依赖一次性授权
Chrome 从 93 版本起对 geolocation 实施“逐次授权”:即使用户点过“始终允许”,下次页面重开仍可能弹二次确认。iOS Safari 更激进,每次访问都需用户手动点“允许”。这意味着:
- 不能假设
getCurrentPosition一定成功,必须处理permission denied场景 - 不要缓存位置结果太久(比如存 localStorage 一周),精度和时效性都不可控
- 如果需要持续追踪,得用
navigator.geolocation.watchPosition,但它耗电、需持续授权,且离开标签页后常被系统终止
最常被忽略的一点:地理位置 API 返回的坐标默认没有海拔、速度、方向等字段,除非设备硬件支持且用户明确授权了高精度模式——而这个开关在系统设置里,前端代码完全无法控制。











