离线检测 window.navigator.onLine

本文探讨了在使用Chrome浏览器时遇到的一种现象:断开互联网连接后,navigator.onLine属性仍然为true。这主要是由于存在虚拟网卡连接导致的。文章解释了online属性的工作原理,不同浏览器的实现差异,以及如何正确判断浏览器的联网状态。包括使用window.onOnline和window.onOffline事件监听浏览器联网状态的变化,并提供了兼容性的浏览器列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用chrome的时候出现一个情况,断掉internet后navigator.onLine 一直为true;

后来发现是还有虚拟网卡连接,所以一直为online状态, chrome只要连到任一局域网也是会显示online



概述

返回浏览器的联网状态.正常联网(在线)返回true,不正常联网(离线)返回false.一旦浏览器的联网状态发生改变,该属性值也会随之变化. 当用户点击链接或者脚本进行网络请求时,如果发现浏览器连接不上互联网.则该属性会被赋值为false.

各浏览器对该属性的实现有些不同.

在Chrome和Safari中,如果浏览器连接不上局域网 (LAN)或者路由器,就是离线状态; 其他情况都是在线状态. 所以当该属性值为false的时候,你可以说浏览器不能正常联网, 但如果该属性值为true的时候, 并不意味着浏览器一定能连接上互联网.还有其他一些可能引起误判的原因,比如你的电脑安装了虚拟化软件,可能会有一个虚拟网卡.它总是显示正常联网.因此,如果你想得到浏览器确切的联网状态,应该使用其他额外的检查手段.

在Firefox和Internet Explorer中, 如果浏览器处于"脱机工作"状态,则返回 false,其他情况都返回true.

你可以在 window.onOnline和window.onOffline上监听事件,来获取浏览器联网状态的改变情况.

语法

online = window.navigator.onLine;

online是个布尔值 true 或 false.

例子

查看 在线演示.

想要查看你是否连接上了互联网, 判断 window.navigator.onLine 的值是否为true:

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}
     

想要监听浏览器的联网状态, 使用window.onOnline和window.onOffline事件:

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})
     

浏览器兼容性

Feature Chrome** Firefox (Gecko)* Internet Explorer Opera* Safari (WebKit)
Basic support

Windows: 11
Mac: 14
Chrome OS: 13
Linux: Always returns true

For history, see crbug.com/7469

Not supported
bug 336359
bug 426932
bug 620472

bug 654579

 

? Not supported 5.0.4

* Firefox 4和 Opera 11.10 并不检测浏览器是否能真正连接上互联网,而是,除了在浏览器"脱机工作"开启时返回false,其他情况下都返回 true.

** 早起版本的Chrome,浏览器处于离线状态.在打开第一个标签时.该属性值会返回true,随后就会返回正确的联网状态了.

### JavaScript `navigator.onLine` 属性的用法 当浏览器支持在线/离线事件检测时,`navigator.onLine` 是一个布尔属性,用于指示设备当前是否具有网络连接。如果该值为 `true`,则表示设备处于联网状态;反之,则表示设备断开了网络连接。 以下是关于 `navigator.onLine` 的一些重要说明: - 当 `navigator.onLine` 返回 `true` 时表示用户的设备能够访问互联网[^1]。 - 此属性可以动态变化,因此可以通过监听 `online` 和 `offline` 事件来实时响应网络状态的变化。例如,在应用中显示通知或禁用某些功能。 下面是一个简单的代码示例,展示如何使用 `navigator.onLine` 来判断当前网络状态并处理相应的逻辑: ```javascript function checkNetworkStatus() { if (navigator.onLine) { console.log("The device is currently online."); } else { console.log("The device is currently offline."); } } // 初始检查 checkNetworkStatus(); // 添加事件监听器以监控网络状态变化 window.addEventListener('online', () => { console.log("You are now back online!"); }); window.addEventListener('offline', () => { console.log("You have gone offline."); }); ``` 此代码片段展示了如何通过调用函数 `checkNetworkStatus()` 检查初始网络状态,并利用 `online` 和 `offline` 事件监听器捕获后续的状态变更。 此外需要注意的是,尽管 `navigator.onLine` 提供了一个简单的方式来检测基本的网络连通性,但它并不能保证特定资源的实际可达性。例如,即使返回值为 `true`,远程服务器可能仍然不可达或者存在其他网络问题[^2]。 #### 注意事项 对于更复杂的场景,建议结合实际请求的结果进一步验证服务可用性,而不是单纯依赖于这个标志位。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值