Chrome navigator.onLine 问题

最新推荐文章于 2023-05-31 13:55:12 发布

原创最新推荐文章于 2023-05-31 13:55:12 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #离线缓存 #onLine

web前端专栏收录该内容

8 篇文章

订阅专栏

本文探讨了navigator.onLine在不同浏览器版本下的应用，特别关注了Chrome32版本下在线状态检测的bug，并通过实例展示了如何在HTML页面间进行在线状态的交互与更新。同时，分析了该bug在特定场景下的表现，如打开新窗口时的在线状态误判。

navigator.onLine可以简单检测本地客户端是否在线。

使用方法。

var _navigatorIsOnline = navigator.onLine;
window.addEventListener("online", function() {
		_navigatorIsOnline = true;
	}, false);
	
	window.addEventListener("offline", function() {
		_navigatorIsOnline = false;
	}, false);
function netstat() {
		return _navigatorIsOnline;
	}

但是在Chrome32下会有一个bug

比如有2个html

window1.html和window2.html分别如下,

现象，当断网后，在window1.html中点击new按钮，该状态立马被改变。变为在线。但网络并没有连接上。

window1.html

<html manifest="main.manifest">
<head>
<script>
var child;
function newWin(e) {
	child = window.open("window2.html");
}
window.addEventListener("online", function(e) {
	console.log(e);
	console.log("online");
	alert("online")
}, false);

window.addEventListener("offline", function(e) {
	console.log(e);
	console.log("offline");
	alert("offline")
	e.stopPropagation();
}, false);
console.log(navigator.onLine)
navigator.onLine = false;


</script>
</head>

<input type=button value="New Window" onclick="newWin(event);"/>
<a href="window2.html" target="_blank">New Window</a>
<html>

main.manifest

CACHE MANIFEST  
#VERSION ${version}
# 直接缓存的文件  
CACHE:
window2.html
#需要在時刻在线的文件  
NETWORK:  
*
# 替代方案  
FALLBACK:

window2.html

<body onunload="test();">
<input type=text >
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</body>
<script>
window.addEventListener("online", function() {
	console.log("online");
}, false);

window.addEventListener("offline", function() {
	console.log("offline");
}, false);
console.log(navigator.onLine)
</script>