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

Thread: Refresh browser on lost internet connection

  1. #1
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182

    Refresh browser on lost internet connection

    Hi all,

    I am having an issue with a script which fails when the internet connection is lost, and so it should.

    Is there a way that the web page can be automatically refreshed if the connection is lost using JavaScript. I need to continually refresh until the connection is back on.

    I know all about META refresh but that does not help.

    Any advice you can give would be great.

    Best regards,

    Dereck
    Keep safe and well.

    Dereck

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It depends on what that script is doing. Give us more details.

    A JavaScript function needs a certain event to be be fired. Events follow certain actions of the user. Or the losing of the internet connection is not controlled by the user, thus there is no event to be used. You must use somehow that script you are talking about. Tell us more about it.

  3. #3
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi Kor,

    Many thansk for your reply.

    All the script does is to load a web page which contains data from an SQL database. The script is split into two parts, I have the parent which displays header text and graphics and also has an iFrame which is refreshed ever 30 seconds. The iFrame calls the child which display the data from the database.

    Its that simple. The problem I am having is every now and then the internet connection is lost and when this happens the iFrame displays the message "Internet connection lost" or words to that effect.

    So I have been trying to come up with a solution in JavaScript that could call the iFrame or the complete page until the connection is live.

    Again, many thanks.

    Dereck
    Keep safe and well.

    Dereck

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by dcjones View Post

    Is there a way that the web page can be automatically refreshed if the connection is lost using JavaScript. I need to continually refresh until the connection is back on.
    Code:
    <script type='text/javascript'>
    
    (function ( img, wait, notify )
    {
     var iObj = new Image();
    
     iObj.onerror = function()
     {
      if( notify )
       alert( 'reloading' );
    
      location.reload( true );
     }
    
     iObj.onload = function()
     {
      setTimeout( test, wait );
     }
    
     function test()
     {
      iObj.src = img + '?t=' + new Date();
     }
    
     test();
    
    })( 'myimage.gif', 2000, true );
    
    // 'myimage.gif' = URL of a small image present on your server
    // 2000 = milliseconds between tests
    // true/false = display confirmation alert before reload
    
    </script>
    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!

  5. #5
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi Logic Ali,

    I must thanks you so much for your time in writing your script.

    It appears to work fine. The only issue I have is when the connection is lost I get an alert on screen which requires user action. Is there any way to stop the alert from displaying and just let the script run.

    Again, many thanks for all your help.

    Dereck
    Keep safe and well.

    Dereck

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by dcjones View Post
    Is there any way to stop the alert from displaying and just let the script run.
    I explained that in the notes at the end of the script.

    Change true to false.
    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!

  7. #7
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi Logic Ali,

    Sorry to be a pain in the neck.

    I am not to sure if the true/false is changed in:
    Code:
    if( notify )
       alert( 'reloading' );
    
      location.reload( true );
     }
    or
    Code:
    })( 'myimage.gif', 2000, true );
    and my last question, should the script to in the iFrame or its parent page.

    Again, many thanks for all your time.

    Dereck
    Keep safe and well.

    Dereck

  8. #8
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Why the full page refresh?

    Just ping the server with a timer until the connection is restored. Than continue with your code.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  9. #9
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi all,

    This is driving me mad.

    I have the following in my main web page:
    Code:
    <script type='text/javascript'>
    
    (function ( img, wait, notify )
    {
     var iObj = new Image();
    
     iObj.onerror = function()
     {
      if( notify )
       alert( 'reloading' );
    
      location.reload( true );
     }
    
     iObj.onload = function()
     {
      setTimeout( test, wait );
     }
    
     function test()
     {
      iObj.src = img + '?t=' + new Date();
     }
    
     test();
    
    })( 'images/myimage.gif', 2000, false );
    
    // 'myimage.gif' = URL of a small image present on your server
    // 2000 = milliseconds between tests
    // true/false = display confirmation alert before reload
    With the ( 'images/myimage.gif', 2000, false ); set to false and I run the script in my browser and then disable my connection the whole page stops and IE says "Internet Explorer cannot display the webpage".

    If I set it to true I get an alert which requires user action. I think Logic Ali has the right approach but I just need to get a result without an alert popping up.

    For my sins I am rubbish at JavaScript, PHP is my bag.

    Again, many thanks for any assistance you can provide.

    Dereck
    Keep safe and well.

    Dereck

  10. #10
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Code:
    location.reload( true );
    The true says do not use the cache version, fetch it from the server. If the internet is down, than how will it get that file?

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  11. #11
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi A1ien51,

    Many thanks for your replies.

    Your idea of pinging the server until the connection is active, How would this be implemented.

    Many thanks,

    Dereck
    Keep safe and well.

    Dereck

  12. #12
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Something like this:

    Code:
    <script type='text/javascript'>
    
    var hasConnectionBeenLost = false;
    (function ( img, wait, notify )
    {
     var iObj = new Image();
    
     iObj.onerror = function()
     {
      if( notify )
        alert( 'reloading' );
        hasConnectionBeenLost = true;
        setTimeout( test, wait );
        //display some message to user connection is lost
        //document.getElementById("someElementMessage").style.display="block";
     }
    
     iObj.onload = function()
     {
         if(hasConnectionBeenLost){
             location.reload( true );
         )
         else{
             setTimeout( test, wait );
         }
     }
    
     
    
     function test()
     {
      iObj.src = img + '?t=' + new Date();
     }
    
     test();
    
    })( 'images/myimage.gif', 2000, false );
    
    // 'myimage.gif' = URL of a small image present on your server
    // 2000 = milliseconds between tests
    // true/false = display confirmation alert before reload

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  13. #13
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi eric,

    Many thanks for your help with this.

    I tried your amended script but when disable the internet connection the iFrame in the web page script falls over and displays the message "Internet Explorer cannot display the webpage".

    Do you have any ideas how I can get the iframe to refresh when the connection is restored.

    Again, thanks for your help.

    Dereck
    Keep safe and well.

    Dereck

  14. #14
    Join Date
    Dec 2002
    Location
    Warwickshire, England
    Posts
    182
    Hi all,

    I am having a bad day trying to get this code to work.

    Can anyone see why I get an syntax error.

    Many thanks for any help you can provide.

    Dereck
    Keep safe and well.

    Dereck

  15. #15
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by dcjones View Post
    Hi Logic Ali,

    Sorry to be a pain in the neck.

    I am not to sure if the true/false is changed in:
    Code:
    if( notify )
       alert( 'reloading' );
    
      location.reload( true );
     }
    or
    Code:
    })( 'myimage.gif', 2000, true );
    and my last question, should the script to in the iFrame or its parent page.

    Again, many thanks for all your time.

    Dereck
    So you just want to reload the iframe.
    This script goes in the main page.
    Code:
    <script type='text/javascript'>
    
    (function ( img, ifId, wait, notify )
    {
     var iObj = new Image(),
         theIframe = document.getElementById( ifId ),
         ifHref = theIframe.contentWindow.location.href;
    
     iObj.onerror = function()
     {
      dt( 'Attempting iframe reload @ ' + new Date().getTime() );
    
      try{ theIframe.contentWindow.location.href = ifHref; }catch( e ){ dt( 'Access Error ' + new Date().getTime() );  };
      
      setTimeout( test, wait );
     }
    
     iObj.onload = function()
     {
      dt( 'Load OK' );
      
      setTimeout( test, wait );
     }
    
     function test()
     {
      try{ ifHref = theIframe.contentWindow.location.href; }catch( e ){}; 
        
      iObj.src = img + '?t=' + new Date().getTime();
     }
    
     function dt(s){ if(notify)document.title = s;}
     
     test();
    
    })( 'myimage.gif', 'if1', 2000, true );
    
    </script>
    There are now 4 parameters. The second is the ID of the target iframe. Instead of alerting when the last parameter is set to true, messages appear in the title bar instead (document must have a <title> set).
    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!

Thread Information

Users Browsing this Thread

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

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