Hello everyone, I was wondering if it is possible to detect if a site is online using JavaScript. For example if google.com is online then alert("Online"); and if google.com is offline then alert("Offline");
I want to use this for two things, one is to detect if a particular URL is online and the other is to detect if the user has an internet connection by detecting if the user can access a site that very rarely goes offline.
Basically, I want to check if the user is able to access a website like google.com and if not alert("Offline"); and if so alert("Online");
Any help would be very much appreciated.
- Chris
P.S: I would not like to use XMLHttp for this.
Last edited by Chris252; 05-14-2009 at 07:38 PM.
Reason: Add the P.S
i cant think of any way offhand, but someone on a random website suggested using an image to determine the status of a site:
Code:
<html>
<head>
<script type="text/javascript">
<!--
var tempImage;
function checkOnlineStatus() {
var tempImage = new Image();
tempImage.onload = returnOnlineStatus;
tempImage.onerror = returnOfflineStatus;
tempImage.src = 'http://www.google.co.uk/intl/en_uk/images/logo.gif'; // this must point to the url of a valid image
}
function returnOnlineStatus() {
document.getElementById('onlineStatus').firstChild.nodeValue = 'You are currently online.';
}
function returnOfflineStatus() {
document.getElementById('onlineStatus').firstChild.nodeValue = 'You are currently offline.';
}
//-->
</script>
</head>
<body onload="checkOnlineStatus();">
<div id="onlineStatus">Checking online status, please wait...</div>
</body>
</html>
1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.
tempImage.src = 'http://www.google.co.uk/intl/en_uk/images/logo.gif' + "?t=" + new Date().getTime();
Be aware that this method relies on the site continuing to have the image available in the same location. It may be more reliable to download the favicon.ico file or whatever name it may have.
Last edited by Logic Ali; 06-29-2012 at 11:00 AM.
Where used, return should be executed unconditionally and always as the last statement in the function.
That's my signature, it's not part of the damn post!
I had an idea to do this one time but never got around to it... My idea was for with a website I owned but it should work just aswell for any other site, and it doesn't require the client having to download an image file, but rather a much smaller javascript file.
Since you can embed .js files in your page across webservers, the idea was to use something like this:
I just realized you're wanting the page to check if the user is online by checking a site for availability... So does that mean you're running the page locally (not on an online webserver)? If so, then you actually do have extra privileges which include being able to access a third-party site in an iframe with JavaScript. Using that method you should be able to accomplish your task...
Once everything is loaded fine, you could try the 'onload' attribute on the body tag or set some sort of timeout with window.setTimeout() to start the following code:
Mind you I haven't tested this so it may require modification. Also it will not work if uploaded to a webserver as browsers disable the ability for webservers to run client-side code against each other...
The reason GET requests are not reliable is that browsers can cache the response from the server. HTML5 has some features you might find useful. Try this blog post to see if it points you in the right direction:
The reason GET requests are not reliable is that browsers can cache the response from the server. HTML5 has some features you might find useful. Try this blog post to see if it points you in the right direction:
If that doesn't get you what you need, try searching Google for html5 detect site offline.
Thank you very much toicontien, you showed me some really nice articles about this topic and from there I found much more interesting posts and finally my solution, that especially WORKS on SAFARI and IPAD!
Here it is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing online/offline state</title>
</head>
<body onload="testConnection(myCallBack);">
<script>
function testConnection(callBack)
{
document.getElementsByTagName('body')[0].innerHTML +=
'<img id="testImage" style="display: none;" ' +
'src="http://www.google.de/images/srpr/logo3w.png?' + Math.random() + '" ' +
'onerror="testConnectionCallback(false);" ' +
'onload="testConnectionCallback(true);">';
testConnectionCallback = function(result){
callBack(result);
var element = document.getElementById('testImage');
element.parentNode.removeChild(element);
}
}
</script>
<!-- example for usage, ie simple alert -->
<script>
function myCallBack(result)
{
alert('Onlinestatus: ' + result);
}
</script>
</body>
</html>
This works great, and actual I just have to divide the alert in two different <div> messages on my body....have some problems here right now, because Safari seems not to like every kind of pushing out he message/state...I'll keep you posted and feel free to share your ideas on developing the error message output further on!
Detecting if a site is online.
Reply With Quote
Originally Posted by aaron.martinas
Bookmarks