Web API--网络接口

小鱼儿 2022-04-10 08:55 134阅读 0赞

### online ###

> 当浏览器能够访问网络, 并且navigator.onLine的值被设为true时, online事件被触发

##### ononline #####

ononline 事件在浏览器开始在线工作时触发。

##### offline #####

> 当浏览器失去网络连接时，offline事件被触发。并且navigator.onLine的值变为 false  
> 与online是相反的

##### 如何使用 #####

console.log(navigator.onLine)
    	window.addEventListener('online', function(){ 
    		console.log('online')
    		console.log(navigator)
    	})
    	 window.addEventListener("offline",function(){ 
    	 	console.log(navigator)
            alert("网络断开了")
    
        })

![在线][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
可以看到网络在线的情况下，navigator.onLine为true

1.  接着切换到无网络状态，可以看到navigator的onLine为false，弹出警示框  
    ![将在线切换到断开][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]
2.  最后切回在线，可以看到navigator的onLine为false，打印online  
    ![切回在线][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220401/83d08a528b3e42938663d2ef9e1fbd1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220401/d3449ffbbf784ceda3f75d7b3d984169.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220401/fb2bc1047c5e4c669776e6f588562ffa.png