检查是否连接到网络; jQuery

问题描述：

我已经通过StackOverflow进行了搜索，并且已经看到了关于如何做到这一点的各种主题，但没有真正涉及到我的特殊情况。我正在编写一个移动“应用程序”（使用HTML5，CSS，jQuery）。它将最终成为一个独立的“应用程序”，这将包含所有需要的文件的本地副本。在我的一个页面上我有一个提交表单，并且由于用户无法在离线状态下提交表单，我希望该页面被重定向到一个自定义的404页面。检查是否连接到网络; jQuery

我只是在寻找是否有办法在jQuery中实现这一点，因为我还没有发现任何东西。

感谢

答

你可以使用

if (navigator.onLine) { 
    // I'm online so submit the form. 
}

我按照您指定的方式尝试;警告在if/else中。如果按我的预期完美工作，当我禁用我的网络连接来测试其他时，它会失败并仍然显示if语句中显示的内容。 – Brendan 2012-03-02 01:18:27

这不是傻瓜证明，它从浏览器获取数据。 – Bot 2012-03-02 01:26:24

它只是显示您是否处于“离线”模式，我正在寻找一种方法来实际检查您是否可以访问互联网。 – Akbari 2016-10-27 06:21:07

答

您可以检查navigator.onLine财产或听offline/online事件：

$(document).on('offline online', function (event) { 
    alert('You are ' + event.type + '!'); 
});

来源：http://www.html5rocks.com/en/mobile/workingoffthegrid/

这里是这些事件的一些MDN文档：https://developer.mozilla.org/en/Online_and_offline_events

我不熟悉这些事件的自己，但如果你看了上面的链接，你会发现很多好的信息。

这看起来像一个干净的方式来做到这一点，但是这些事件在所有浏览器中都能正常工作吗？ – 2012-03-02 01:23:44

绝对不是:)。这是使用HTML5特定事件，这还不是官方规范。这里是一个到'navigator.onLine'的MDN网站的链接：https：//developer.mozilla.org/en/DOM/window.navigator.onLine（浏览器支持位于底部） – Jasper 2012-03-02 01:29:38

@ToddMoses我将不得不测试它确定它的工作，但托德摩西的答案似乎是一个很好的使用。但是你可以使用一个小资源来加载而不是整个框架。例如，你可以托管自己的JS文件，该文件只是向全局范围添加一个标志，如果该标志存在，则用户在线。为了确保JS文件没有被缓存，你必须正确地设置文件的标题以便始终刷新。 – Jasper 2012-03-02 01:31:27

答

这里是我会做什么，基于：how to check if the user has the connection to the internet

首先，使用JavaScript库的链接，以确定用户在线。如果为true，则将表单的操作属性更改为在线页面，否则请更改离线页面。

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script> 
    <script> 
$('#target').submit(function() { 
    if (typeof window.$ !== 'function') { 
    $('myform').attr("action" , "offlinepage.html" ); 
    } 
    else 
    { 
    $('myform').attr("action" , "onlinepage.html" ); 
    } 
}); 
    </script>

答

实际上你根本就不需要jQuery。 HTML5本身为在线/离线条件下运行的应用程序提供了一个整洁的工具 - cache manifest。缓存清单是<html>标签的manifest属性引用一个纯文本文件：

<html manifest="cache.manifest">

这个清单文件的内容告诉浏览器，哪些资源需要联机条件函数（NETWORK），该文件缓存（ CACHE）以及在离线时请求网络资源时如何处理（FALLBACK）。

CACHE MANIFEST 
# the above line is required 

NETWORK: 
* 

FALLBACK: 
* error404.html 

CACHE: 
index.html 
about.html 
help.html 
# Plus all other resources required to make it look nice 
style/default.css 
images/logo.png 
images/backgound.png

使用清单，浏览器首先查阅清单，并没有任何脚本，据此行为根据是在线还是离线。

http://dev.w3.org/html5/spec-preview/offline.html#manifests

UPDATE：

请注意，响应内容类型的关键要求。纯文本根本不起作用。

必须使用text/cache-manifest MIME类型来提供清单。

http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests

另外要注意，在清单中未列出的所有URL被从负载封锁作为结果。这就是为什么我通过通配符（*）修复了上述清单以允许“其余”。这可能会帮助你开始。

有趣的....这可能是我正在寻找...假设我有5个网页（index.html，contact.html，about.html，rates.html，reserve.html），索引将是无论如何显示，以及关于页面。联系我们，预订和费率我想在离线时链接到自定义404页面;我会怎么做？ – Brendan 2012-03-05 20:11:47

@Brendan我已经更新了答案以适合您的情况。 – 2012-03-05 20:23:53

我给了你赏金，因为即使我无法让你的解决方案在我的普通浏览器上工作，我相信如果我严格为移动设备编码，这是一个好方法。 – Brendan 2012-03-06 03:23:22

答

尝试设置ajaxSetup每n毫秒（我把1000放在这里）做一个请求，并检查它是否超时，然后禁用按钮。

$.ajaxSetup({ 
    timeout: 1000, 
    error: function(request, status, maybe_an_exception_object) { 
     if(status != 'timeout') 
      //Code to enable button 
     else 
      //Code to disable button 
    } 
});

这可能会导致一些严重的连接开销，当你有很多客户端 – 2014-02-26 11:27:05

答

使用window.navigator.onLine是inherantly不可靠的，因为用户可能会被连接到网络，但网络不能访问互联网。

然而，这里是一个准系统例如

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Online status</title> 
    <script> 
    function updateIndicator() { 
    document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; 
    } 
    </script> 
</head> 
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> 
    <p>The network is: <span id="indicator">(state unknown)</span> 
</body> 
</html>

看到活动的小提琴：http://jsfiddle.net/3rRWK/

大声笑。在3年有效的答案上收到downvote。 :) – Layke 2014-05-15 08:29:04

答

我用下面的代码来检查连接。注意：以上解决方案都不适用于Firefox，它依赖于其内部的“脱机工作”状态：

// Register listeners 
window.addEventListener("offline", function(){ 
    $('#globalDiv').hide(); 
    $("#message").html('WARNING: Internet connection has been lost.').show(); 
}); 
window.addEventListener("online", function(){ 
    $("#message").empty().hide(); 
    $('#globalDiv').show(); 
});

截至2015年这个答案似乎是最可靠的，如果你想要一个简单的事件使用。 – dlsso 2015-11-16 17:17:02

如何在没有网络连接的情况下浏览页面时在每个页面中重新初始化。这是工作，但我需要允许导航通过网页是否没有网络。以及我需要在每个页面中显示无网络消息。 – user2584538 2016-05-10 08:25:24

您可以在页面顶部将“无网络”消息显示为横幅，而不是阻止整个页面，但允许在那里导航，否则没有网络是另一主题。为此，您需要将页面缓存到本地。 HTML5有一个机制（缓存清单），请参考这个参考：http：//www.w3schools.com/html/html5_app_cache.asp – Webomatik 2016-05-15 22:15:01

检查是否连接到网络; jQuery

相关推荐