# Check If Internet Connection Exists in JavaScript

**URL:** <https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639>\
**Category:** web dev\
**Created:** [September 15, 2013, 9:26pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639 "2013-09-15T21:26:12Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 15, 2013, 9:26pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/1 "2013-09-15T21:26:12Z")

</div>

> **[Check If Internet Connection Exists in JavaScript](https://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm)**
>
> Use this simple and effective snippet of JavaScript to check if an internet connection exists or not.

I am always taking notes on my phone, and I wanted to sync them to a web service that I created for fun. As part of that, I needed to ensure I had an internet connection before making the web request. I wrote about how I did that in this tutorial.

:megaman:

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 21, 2016, 8:59am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/2 "2016-10-21T08:59:30Z")

</div>

I don’t know java, so even a simple thing becomes impossible for me, what i would like to do is to use this code on a simple link, if internet exists open the link if not show a message, is there some example of this somewhere, i was not able to find. Second i would like to do the same for Iframes if internet exists show the contents of the iframe, if not show message.

In another post i found this:  
You can trigger it on anything you want. It all depends on how frequently you want to check for the connection. I don’t know of any really efficient ways outside of a timer or having code on every button that triggers this check 🙂

i don’t mind having code on every button, but what would the code be?

Update,  
I did find a way how to open a link instead of the alert by changing it with this: window.location = ‘[https://www.google.com](https://www.google.com)’;  
but i still would like to change it in a herf and not in the java code if possible

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 21, 2016, 11:14am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/3 "2016-10-21T11:14:06Z")

</div>

I read that your code must be on a server to work, well i tried on a server but i always get no internet connection  
this is an exact copy of your code:  
[http://www.8ap.eu/checkintcon/](http://www.8ap.eu/checkintcon/)  
i need it on a web app, and i get the same, always no connection.  
plus google tells me:  
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check [https://xhr.spec.whatwg.org/](https://xhr.spec.whatwg.org/).  
i don’t know if that is a problem or not?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 21, 2016, 5:44pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/4 "2016-10-21T17:44:40Z")

</div>

benedetto - the synchronous issue is something to address, so I’ve updated the code snippet in the tutorial to use `true` for the last argument:

`xhr.open('HEAD', file + "?rand=" + randomNum, true);`

Try making that change and seeing if the request works. We can then address your other issue next once we got that part figured out 🙂

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 21, 2016, 11:25pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/5 "2016-10-21T23:25:58Z")

</div>

I did the change to true, but same result

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 22, 2016, 1:56am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/6 "2016-10-22T01:56:14Z")

</div>

So sorry! I see what the problem was. Replace the `file` variable with this:

```
var file = "https://www.kirupa.com/blank.png";

```

Because the URL in my example started of with just // instead of https://, the request inherited your site’s http:// instead. That won’t work, for the URL needs to be https 🙂

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 22, 2016, 8:30am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/7 "2016-10-22T08:30:02Z")

</div>

i see, well i don’t have an https at the moment, i tried putting the check image fine on the same domain, but still the same, but any way so this means it would never work in a webapp, because it wouldn’e be on a server but on a smartphone?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 22, 2016, 4:53pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/8 "2016-10-22T16:53:23Z")

</div>

It should work inside a webapp as well. When you mention webapp, are you referring to a Cordova app? Or is it just a browser-based app running on a mobile device? I fiddled with my earlier code, and I had a bug in it. It won’t work when set to run asynchronously, but I’ve updated it to use the `onload` event.

Below is a small example:

```
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
	var file = "https://www.kirupa.com/blank.png";
	var randomNum = Math.round(Math.random() * 10000);
	
	xhr.open('HEAD', file + "?rand=" + randomNum, true);
	
	xhr.onload = function (e) {
		if (xhr.status >= 200 && xhr.status < 304) {
	        alert("yay!");
	    } else {
	        alert("no!!!");
	    }
	};
	xhr.send();
}

```

If you try this on your server and just call `doesConnectionExist`, the code should work! At least, I’m fairly confident it will 😛

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 23, 2016, 1:05am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/9 "2016-10-23T01:05:45Z")

</div>

If the above solution doesn’t work, here is (I think) an even better approach:

```
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "https://www.kirupa.com/blank.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open("HEAD", file + "?rand=" + randomNum, true);
    xhr.send();

    xhr.addEventListener("readystatechange", processRequest, false);

    function processRequest(e) {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 304) {
                alert("connection exists!");
            } else {
                alert("connection doesn't exist!");
            }
        }
    }
}

```

This approach is better suited for asynchronous requests by using the readyState property. I don’t know if this will yield you a different response than what you’ve seen earlier, but how are you running your web app? Is it installed (Cordova, Phonegap, Webview, etc.), or are you running it via the browser?

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 24, 2016, 12:09pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/10 "2016-10-24T12:09:14Z")

</div>

Yes i’m using something like Cordova, i think it’s Phonegap but i’m not sure, because i send it to compile using a web service, but anyway the last example did the trick, the first one i couldn’t get it to work, thanks for the time. I did find out that using your image for the check didn’t work, so i changed it to one on the same server and it worked, now i have a question, instead of the image would it be possible to ping google and if you get the 200 response code ok if not ko, The working example is at: [http://www.8ap.eu/checkintcon/](http://www.8ap.eu/checkintcon/)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 24, 2016, 11:46pm UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/11 "2016-10-24T23:46:37Z")

</div>

You can try it and find out. The safest bet is to point to a resource on your own server. That way you don’t have to worry about any security settings changing where Google starts blocking requests to their server. Not a problem if you are running on a server and can make an update very quickly to point to another location. More of an issue if you are dealing with deployed apps on a device 🙂

---

<div class="post-metadata">

**Author:** ![benedettoapp](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@benedettoapp](https://forum.kirupa.com/u/benedettoapp)\
**Post date:** [October 25, 2016, 8:37am UTC](https://forum.kirupa.com/t/check-if-internet-connection-exists-in-javascript/331639/12 "2016-10-25T08:37:36Z")

</div>

I’m not able to even try to write something like that, but thanks any way for the explanation, i just asked because i did something similar with Mit app inventor ( coding with blocks ) and i used the 200 code from google to check for internet.

P.s. if you have nothing to do, would you have a look at this:

> <https://stackoverflow.com/questions/39836604/google-maps-in-responsive-tabs>

  
Thanks.