www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Detecting if a site is online.

  1. #1
    Join Date
    May 2009
    Posts
    5

    Exclamation Detecting if a site is online.

    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 08:38 PM. Reason: Add the P.S

  2. #2
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    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>

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by aaron.martinas View Post
    using an image to determine the status of a site:
    very clever!

    i was thinking of suggesting a json w/callback webservice, but images area lot easier to find!

  4. #4
    Join Date
    Jun 2012
    Posts
    4
    Hi I would like to use this script, but it doesn't work in Safari.
    Safari always shows "You are online", also when I'm not...

    Any suggestion how to make Safari run this script?

    Thanks!

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by trionix View Post
    Hi I would like to use this script, but it doesn't work in Safari.
    Safari always shows "You are online", also when I'm not...

    Any suggestion how to make Safari run this script?
    I would be inclined to change this line:
    Code:
                 tempImage.src = 'http://www.google.co.uk/intl/en_uk/images/logo.gif';
    to:
    Code:
                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 12:00 PM.

  6. #6
    Join Date
    Mar 2012
    Posts
    202
    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:

    HTML Code:
    <script src="http://server1.com/jsfile.js"></script>
    The jsfile.js would contain variable declarations, ex:

    Code:
    var VariableX = "some variable input";
    So, you can use code like the following in order to get what you want with JavaScript only...

    HTML Code:
    <script src="http://server1.com/jsfile.js"></script>
    <script>
    if(VariableX) { document.write("The webserver is online!"); }
    else { document.write("The webserver is offline."); }
    </script>

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    That requires you to have control of both servers.

  8. #8
    Join Date
    Mar 2012
    Posts
    202
    No, not necessarily. All you need is to know is what is declared in the .js file...

  9. #9
    Join Date
    Mar 2012
    Posts
    202
    Then again there may be some sort of AJAX error code you could use to check the server's URL directly, would be the best way....

  10. #10
    Join Date
    Jun 2012
    Posts
    4
    Quote Originally Posted by Gray1989 View Post
    Then again there may be some sort of AJAX error code you could use to check the server's URL directly, would be the best way....
    Thanks for your answer!

    But with a simple GET request on a url like google.com, I encounter the same problem in Safari: he always says "online" even you are not.

    Everything I tried, GET url requests, image loads, whatever... It always works in any browser except Safari...

    Do you know perhaps a special script just working on safari?

    Thanks you!

  11. #11
    Join Date
    Mar 2012
    Posts
    202
    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...

  12. #12
    Join Date
    Mar 2012
    Posts
    202
    In order to access an iframe with javascript, you may use something similar to the following code:

    HTML Code:
    <iframe src="http://www.google.ca/" ID="googleframe"></iframe>
    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:

    Code:
    if(googleframe.document.body.innerHTML) { alert("Online"); }
    else { alert("Offline"); }
    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...

  13. #13
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    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:

    http://ednortonengineeringsociety.bl...in-html-5.html

    If that doesn't get you what you need, try searching Google for html5 detect site offline.

  14. #14
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  15. #15
    Join Date
    Jun 2012
    Posts
    4
    Quote Originally Posted by toicontien View Post
    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:

    http://ednortonengineeringsociety.bl...in-html-5.html

    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!

    Thank you all!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles