Question

我已经搜索了StackOverflow并且已经看到了关于如何执行此操作的各种主题，但没有任何真正与我的特定情况相关的内容。我正在编写（用于类）移动“应用程序”（使用HTML5，CSS，jQuery）。它最终将成为一个独立的“应用程序”，它将包含所有所需文件的本地副本。在我的一个页面上，我有一个提交表单，由于用户在离线时无法提交表单，我希望将该页面重定向到自定义404页面。

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

由于

Answer 1

您可以使用

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

Answer 2

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

<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

<强>更新

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

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

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

另请注意，清单中未列出的所有URL都会因此而被阻止加载。这就是为什么我用通配符（*）修复上面的清单以允许“其余”。这可能会帮助你开始。

Answer 3

您可以查看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

我自己并不熟悉这些事件，但如果您阅读上述链接，您应该会找到很多有用的信息。

Answer 4

我使用以下代码检查连接。注意：上述解决方案均不适用于Firefox，后者依赖于其内部的“脱机工作”和＃39;状态：

// 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();
});

Answer 5

尝试设置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
    }
});

Answer 6

使用window.navigator.onLine非常不可靠，因为用户可能已连接到网络，但该网络无法访问互联网。

但是，这是一个准系统示例

<!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/

Answer 7

以下是我要做的事情，基于：how to check if the user has the connection to the internet

首先，使用javascript库链接确定用户是否在线。如果为true，则将表单的action属性更改为在线页面，否则为离线页面。

    <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的

7 个答案: