检查互联网连接是否存在与JavaScript?

你如何检查是否有使用Javascript的互联网连接? 这样,我可以有一些条件说:“在生产过程中使用JQuery的谷歌caching版本,在开发过程中使用或本地版本,取决于互联网连接”。

您的具体情况的最佳select可能是:

在closures</body>标记之前:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 

这可能是最简单的方法,因为你的问题是围绕着jQuery。

如果你想要一个更强大的解决scheme,你可以尝试:

 var online = navigator.onLine; 

在离线networking应用程序中详细了解W3C的规范 ,但请注意,在现代Web浏览器中,这种方式效果最佳,而在较早的Web浏览器中这样做可能无法按预期工作,或根本无法正常工作。

或者,XHR请求到您自己的服务器并不是一个方法来testing您的连接。 考虑到其他答案之一,说明XHR的失败点太多,如果你的XHR在build立连接时有缺陷,那么它在常规使用中也是有缺陷的。 如果您的网站因任何原因无法访问,那么在相同服务器上运行的其他服务也可能无法访问。 这个决定取决于你。

我不会build议向他人的服务提供XHR请求,甚至是google.com。 向你的服务器发出请求,或根本没有。

什么意思是“在线”?

“在线”意味着什么似乎有些困惑。 考虑到互联网是一堆networking,然而有时候你是在一个VPN上,不能访问互联网或者是互联网。 通常公司有自己的networking连接到其他外部networking有限,所以你可以被认为是“在线”。 上网仅需要连接到networking,而不是您尝试连接的服务的可用性和可达性。

要确定主机是否可从您的networking访问,您可以这样做:

 function hostReachable() { // Handle IE and more capable browsers var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" ); var status; // Open new request as a HEAD to the root hostname with a random param to bust the cache xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false ); // Issue request and handle response try { xhr.send(); return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) ); } catch (error) { return false; } } 

你也可以在这里findGist: https : //gist.github.com/jpsilvashy/5725579

关于本地实施的细节

有人评论说:“我总是被假回报”。 那是因为你可能在你的本地服务器上进行了testing。 无论您提出请求的服务器是什么,您都需要能够响应HEAD请求,如果需要,当然可以将其更改为GET。

好的,也许在游戏中有点晚了,但是用在线图像检查呢? 我的意思是,OP需要知道他是否需要抓取Google CMD或本地JQ副本,但这并不意味着浏览器无论如何都不能读取Javascript,对吧?

 <script> function doConnectFunction() { // Grab the GOOGLE CMD } function doNotConnectFunction() { // Grab the LOCAL JQ } var i = new Image(); i.onload = doConnectFunction; i.onerror = doNotConnectFunction; // CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date()); // escape(Date()) is necessary to override possibility of image coming from cache </script> 

只是我2美分

5年后版本:

今天,如果您不想深入了解本页所描述的不同方法的细节,那么您可以使用JS库。

对这些是https://github.com/hubspot/offline 。 它检查预定义的URI的连接,默认你的图标。 它会自动检测用户连接重新build立的时间,并提供整洁的事件,如down ,你可以绑定到更新你的用户界面。

你可以模仿Ping命令。

使用Ajax向您自己的服务器请求一个时间戳,使用setTimeout定义一个定时器到5秒,如果没有响应它再试一次。

如果4次尝试中没有回应,则可以假定互联网已closures。

所以你可以定期检查这个例程,如1或3分钟。

这对我来说似乎是一个好的和干净的解决scheme

您可以尝试多次发送XHR请求,然后如果出现错误,则表示互联网连接出现问题。

编辑: 我发现这个JQuery脚本正在做你在问什么,我没有testing它。

我为此写了一个jQuery插件。 默认情况下,它会检查当前的URL(因为它已经从Web上载入过一次),或者你可以指定一个URL作为参数。 总是向Google发出请求并不是最好的主意,因为它在不同的时间在不同的国家被阻止。 另外,你可能会受到特定海洋/天气前沿/政治气候之间的联系的影响。

http://tomriley.net/blog/archives/111

我有一个解决scheme谁在这里工作,检查互联网连接是否存在:

 $.ajax({ url: "http://www.google.com", context: document.body, error: function(jqXHR, exception) { alert('Offline') }, success: function() { alert('Online') } }) 

发送XHR请求是不好的,因为如果特定服务器closures,它可能会失败。 相反,使用googles API库来加载他们caching的jQuery版本。

您可以使用Google API在加载jQuery之后执行callback,这将检查jQuery是否已成功加载。 像下面的代码应该工作:

 <script type="text/javascript"> google.load("jquery"); // Call this function when the page has been loaded function test_connection() { if($){ //jQuery WAS loaded. } else { //jQuery failed to load. Grab the local copy. } } google.setOnLoadCallback(test_connection); </script> 

谷歌API文档可以在这里find。

一个更简单的解决scheme:

 <script language="javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> 

后来在代码中:

 var online; // check whether this function works (online only) try { var x = google.maps.MapTypeId.TERRAIN; online = true; } catch (e) { online = false; } console.log(online); 

当不在线谷歌脚本将不会被加载,从而导致一个错误,将引发exception。