Javascript check for internet connection and write a line into div if not

Question

I have two files, a HTML and JavaScript file, in the html i included the twitter.js in the header, and I set id for the div below as following. Then in the twitter.js I wrote the if statement to check for connection, if yes, it loads the twitter function else it writes No Connection in the tweets div, but I can't get it work. Plus, the in the tweets div is loading anyway, how can I include it in the JavaScript file? HTML:

<div id="tweets">
  <a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="id">Tweets by @user</a>
</div>

JavaScript:

if(navigator.onLine) {
  !function(d,s,id){
    var js, fjs = d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)  ? 'http'  : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + "://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);
    }
  }(document,"script","twitter-wjs");
} else {
  document.getElementById('tweets').innerHTML = '<p>No Connection</p>';
}

http://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript — grigno, Nov 28 '13 at 16:58

brian · Answer 1 · 2013-11-28T17:17:06.657

Which browser are you using ? The navigator.onLine property shows if the navigator is in online mode or offline mode. It does not shows if you actually have an active internet connection or not.

For example, in Firefox, you have to set the browser in offline mode manually, which means that even though your internet connection is off, navigator.onLine will have the value true unless you switched your browser to offline mode. However, a browser like Google Chrome automatically switches the browser to offline mode if no internet connection is detected, in that case your code should work.

Hope this helps.

EDIT:

What you can do is load the library, and if not loaded then you know you're offline:

HTML

<script src='//platform.twitter.com/widgets.js'></script>

JS

if(!window.twttr){ 
  document.getElementById('tweets').innerHTML = '<p>No Connection</p>'; 
}

The variable window.twttr being available only if the library is properly loaded.

score 0 · Answer 2 · answered Nov 28 '13 at 16:48

0

what if you empty the #tweets div, and include this line in js when navigator.onLine is true

document.getElementById('tweets').innerHTML = '<a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="id">Tweets by @user</a>';

Let me know if it's useful.

answered Nov 28 '13 at 16:48

Joaquín O

1,431
1
9
16

No this isn't working – Ali Zahr Nov 28 '13 at 16:51

score 0 · Answer 3 · answered Nov 28 '13 at 17:00

What you could maybe do is wrap an AJAX call to jQuery in a function and if it returns successfully then you know the user is connected to the internet. Something like this:

var isOnline = false;
function isOnline(){
    $.ajax({
        async:false,
        url: "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
        success:function(){
            online = true;
        },
        error:function(e){
            console.log(e);
            online=false;
        }
    }); 
}

See this jsFiddle for a working example.

score 0 · Answer 4 · 2013-11-28T17:18:02.197

Place the JavaScript code below your <div> element and it should work as it did for me.

javascript

function CheckOnline() {
  if(!navigator.onLine) {
    !function(d,s,id){
      var js, fjs = d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)  ? 'http'  : 'https';
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
      }
    }(document,"script","twitter-wjs");
  } else {
    document.getElementById('tweets').innerHTML = '<p>No Connection</p>';
  }
}

html

<!-- somewhere in the head -->
<script src="script_name.js"></script>

<!-- somewhere in the body -->
<div id="tweets">
  <a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="id">Tweets by @user</a>
</div>
<script>CheckOnline()</script>

I'm trying to make them externally linked and not within the html code. — Ali Zahr, Nov 28 '13 at 17:03

score 0 · Answer 5 · answered Nov 28 '13 at 17:01

0

You have tryied just put "https://platform.twitter.com/widgets.js" without "p" var?

answered Nov 28 '13 at 17:01

Marcelo Aymone

293
3
19

Javascript check for internet connection and write a line into div if not

5 Answers5