Yikes! I was afraid of that. I am not as familiar with PHP to know what to do there unfortunately 
I feel like this is a non-issue. If PHP is executing any code at all, that means it’s just received a request (99.99% likely over the internet) from a browser. If erwin007 is talking about some crazy setup where there’s some super weird LAN restrictions and the client and server are basically co-located, then that should be clarified.
OTOH, maybe erwin007 just wants to know that $('#myForm').on('submit', async e => await checkInternet() ? true : e.preventDefault()) is a thing.
Hi Kirupa,
I solved the problem with the form , thanks.
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.
Hey all, so would this code work if I also wanted to check to see if an IP address is connected to a network? I want to see if an IP address is online or offline?
Unfortunately, no. There is no way in JS to ping a particular IP address and read the result. Is that IP address a web server? If so, you could check for the existence of a file on it as an indirect way of checking whether that IP address is connected to the network. This tutorial walks through how you can do that: https://www.kirupa.com/html5/checking_if_a_file_exists.htm
Hi,
Just wanted to check, will it execute at a certain period of time?
Suppose when i start my application the internet connection is there, but then in between the internet connection is lost in that case will the readyStateChange event auto fires?
@kirupa This article was very helpful for me! By the way, I don’t think you need the random to avoid cached results. Because I don’t think a browser would ever return a cached HEAD request as doing so would defeat the point of the HEAD request. See https://stackoverflow.com/questions/21019245/will-an-http-head-request-ever-be-cached-by-phone-browser Unfortunately, I couldn’t find any definite link confirming that no browser would ever cache a HEAD request. However, as the Stack Overflow answer explains, it may make sense for a browser to use the returned HEAD response to update its cache. But it really makes zero sense for a browser to visit its cache when making a new HEAD request.
1 Like
That is a good point! I didn’t know this. I’ll fiddle with this some more and adjust the tutorial
1 Like
@kirupa Bro, I’m getting this error in the console ‘Access to XMLHttpRequest at ‘https://www.kirupa.com/blank.png?rand=3337’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’ and failed response in the network tab. I 'm using in an Angular application and calling the function right before an API call. Please help me out to fulfill the request.
Ah! Thanks for catching that. At some point, something changed on the server, browser settings, or both haha. I have updated the article to reference a URL that doesn’t have CORS enabled: https://i.imgur.com/7ofBNix.png
If you swap the URL with the imgur link, you should be fine 
Cheers,
Kirupa
you should check up the navigator to make the Internet work for your java script. It only determined when you are connected to internet.
@kirupa Hey, and thanks for the clear walk through, that is comprehensible even to a total novice like me
I’m having problems implementing the code though. It does work with your URL but when I swap it for one on my server it fails me. The server is an apache test server in my own network, and when I type in the the url in the browser it works, but not when I run the html page with the script. Again, only change is the different url. Any ideas?
Does your console display any error?
Well, it gives me a XMLHttpRequest cannot load due to access control checks. This perplexes me, because I’m seemingly able to access a file somewhere on the internet (imgur), but not on my own server within my own local network. Also, the way I understand access control checks, I shouldn’t even be able to access the imgur file in the first place, yet I am.
I’m running the code on a flask server (this was a python project originally) and I won’t have access to the server to check when I deploy this. It will basically be a black box in the local network that I will want to check up status and redirect the browser to in case it is up, and load some localhost html in case it’s down. All the while checking for up status every few seconds. I’ve spend the last 4 days trying to find a workable solution on the web with python, php and now javascript, but nothing seems to work (for different reasons). Frustrating…
You are running into a CORS-related security issue. The server you are accessing can specify whether arbitrary endpoints (aka not a page on the same domain) can call resources on it. Imgur has a permissive CORS policy specified, but the server you are accessing does not. That’s the problem you are running into.
You can use a proxy to fake the CORS permission. You can see how I did that in this example: Checking If A File Exists - #11 by kirupa
Let me know if this works for you!
Cheers,
Kirupa
Interesting solution. Unfortunately it isn’t working here, I still get the same error. Interestingly though it takes 30 sec. for the error to come when using the proxy. I’ve also tried Firefox and Chrome, to no avail. Also when testing it on the heroku demo server, I get a 0 after 30 sec., while any other domain returns within 1 - 2 sec.
Is your other computer accessible from the internet? If not, that’s a mistaken assumption I made. I think cors-anywhere only works on publicly accessible URLs. If it is an internal URL, it probably won’t work since the proxy can’t access the internal content.
Can you add the appropriate CORS settings to your internal server? This article gives a good overview: Cross-Origin Resource Sharing (CORS) - HTTP | MDN
So, i’ve went through the linked article but unfortunately I can’t edit the CORS setting. Anyhow, I elected to solve this by starting up chromium with --disable-web-security, since my kiosk browser session has only this one purpose. Thanks so much for your help
Nice! You are lucky to be able to have the luxury of enabling that setting to disable web security 
(Now, say that last sentence three times fast!)