IE8及更早版本完全不支持Geolocation API,navigator.geolocation为undefined,必须先用if判断存在性再调用,否则直接报错;替代方案只能是IP定位或手动输入,Polyfill无效。

HTML5 Geolocation API 在 IE8 及更早版本直接报错
IE8 及以下版本完全不支持 navigator.geolocation,调用 getCurrentPosition() 会抛出 Object doesn't support property or method 'getCurrentPosition' 错误。这不是兼容性降级问题,而是原生缺失——连对象属性都不存在。
- IE9 开始支持 Geolocation(需开启位置服务且页面为 HTTPS 或 localhost)
- IE8 及更低版本的
navigator对象里压根没有geolocation这个字段,typeof navigator.geolocation === 'undefined' - 不能靠 try/catch 捕获后“优雅降级”,必须先做存在性判断,否则 JS 执行直接中断
检测并安全调用 getCurrentPosition() 的写法
核心是两层防护:先判断 API 是否存在,再判断是否支持回调函数类型(避免旧版 Android 浏览器等其他边缘情况)。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
console.log(pos.coords.latitude, pos.coords.longitude);
},
function(err) {
console.error('定位失败:', err.code, err.message);
},
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 30000 }
);
} else {
console.warn('当前浏览器不支持地理定位');
// 此处可 fallback 到 IP 定位、手动输入城市等方案
}
- 切勿省略
if (navigator.geolocation)判断,尤其在全局脚本或 DOM ready 早期执行时 - IE8 下连
navigator.geolocation都是undefined,访问其子属性会立即报错,无法靠try/catch补救 -
maximumAge设为 30000(30 秒)可避免重复请求,但 IE9+ 才真正支持该选项;IE8 不进这个分支,所以不影响
需要兼容 IE8?别用 HTML5 地理定位
如果项目明确要求支持 IE8,HTML5 Geolocation API 就不该出现在代码路径中——不是加个判断就能“兼容”,而是整个能力不可用。
- 替代方案只有服务端 IP 归属地解析(如调用淘宝 IP 库、腾讯位置服务 IP 接口),精度通常只到城市级
- 前端可结合用户手动选择省份/城市 + 缓存 localStorage,比强行适配更可靠
- 某些地图 SDK(如百度地图 v1.2+、高德地图 v1.3+)虽宣称支持 IE6+,但其定位功能底层仍依赖
navigator.geolocation,在 IE8 中实际不可用
Build 工具或 Polyfill 能解决吗?
不能。这不是缺少语法支持,而是浏览器引擎层面无实现。任何 JS Polyfill 都无法凭空注入硬件定位能力。
立即学习“前端免费学习笔记(深入)”;
-
geolocation-polyfill等库只对部分 Android 2.x 或 Safari 5.0 等有 patch 效果,对 IE8 完全无效 - Babel、Webpack 等构建工具不处理 API 兼容性,它们只转译语法,不模拟设备能力
- 条件注释(











