Check if connected to a network; jQuery

后端 未结 7 1014
执笔经年
执笔经年 2020-12-13 20:37

I have searched through StackOverflow and have seen various topics on how to do this, but nothing that really pertains to my particular situation. I am writing (for a class)

相关标签:
7条回答
  • 2020-12-13 21:04

    try to set up ajaxSetup to do a request every n milliseconds (i put 1000 here) and check if it times out and then disable button.

    $.ajaxSetup({
        timeout: 1000, 
        error: function(request, status, maybe_an_exception_object) {
            if(status != 'timeout')
                //Code to enable button
            else
                 //Code to disable button
        }
    });
    
    0 讨论(0)
  • 2020-12-13 21:04

    Using window.navigator.onLine is inherantly unreliable, because the user might be connected to a network, but that network could not have internet access.

    However, here is a barebones example

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

    See the fiddle in action: http://jsfiddle.net/3rRWK/

    0 讨论(0)
  • 2020-12-13 21:15

    You could use

    if (navigator.onLine) {
        // I'm online so submit the form.
    }
    
    0 讨论(0)
  • 2020-12-13 21:16

    Here is what I would do, based upon: how to check if the user has the connection to the internet

    First, use a javascript library link to determine if user is online. If true change the action property of your form to the online page, else the offline page.

        <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>
    
    0 讨论(0)
  • 2020-12-13 21:19

    You actually don't need jQuery for this at all. HTML5 itself has a neat facility for applications ran in online/offline conditions - cache manifest. The cache manifest is a plain text file referenced in the manifest attribute of <html> tag:

    <html manifest="cache.manifest">
    

    The contents of this manifest file tells the browser, which resources need online conditions to function (NETWORK), which files to cache (CACHE) and what to do when network resource is requested while offline (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
    

    When using manifest, browser first consults the manifest and, without any scripting, acts accordingly based on being online or offline.

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

    UPDATE:

    Please note the crucial requirement on response content type. Plain text simply doesn't work.

    Manifests must be served using the text/cache-manifest MIME type.

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

    Also be aware that all URLs not listed in the manifest are blocked from load as a result. That's why I've fixed the above manifest with wildcards (*) to allow "the rest". That might help you get started.

    0 讨论(0)
  • 2020-12-13 21:23

    You can either check the navigator.onLine property or listen to the offline/online events:

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

    Source: http://www.html5rocks.com/en/mobile/workingoffthegrid/

    And here are some MDN docs for these events: https://developer.mozilla.org/en/Online_and_offline_events

    I'm not familiar with these events myself, but if you read the above links, you should find a lot of good information.

    0 讨论(0)
提交回复
热议问题