Refresh browser on lost internet connection

[dcjones]

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

[Kor]

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.

[dcjones]

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

[Logic Ali]

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.

<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>

[dcjones]

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

[Logic Ali]

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.

[dcjones]

Hi Logic Ali,

Sorry to be a pain in the neck.

I am not to sure if the true/false is changed in:

if( notify )
   alert( 'reloading' );

  location.reload( true );
 }

or

})( '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

[A1ien51]

Why the full page refresh?

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

Eric

[dcjones]

Hi all,

This is driving me mad.

I have the following in my main web page:

<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

[A1ien51]

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

[dcjones]

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

[A1ien51]

Something like this:

<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

[dcjones]

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

[dcjones]

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

[Logic Ali]

Hi Logic Ali,

Sorry to be a pain in the neck.

I am not to sure if the true/false is changed in:

if( notify )
   alert( 'reloading' );

  location.reload( true );
 }

or

})( '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.

<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).