Refresh browser on lost internet connection

@dcjonesNov 26.2010

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

to post a comment

JavaScript

24 Comments(s) _↴

@KorNov 26.2010 — #It depends on what [I]that[/I] 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 [I]that[/I] script you are talking about. Tell us more about it.

@dcjonesauthorNov 26.2010 — #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_AliNov 26.2010 — #

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.[/quote]

&lt;script type='text/javascript'&gt;
 
 (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
 
 &lt;/script&gt;

@dcjonesauthorNov 26.2010 — #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_AliNov 26.2010 — #Is there any way to stop the alert from displaying and just let the script run.[/quote]I explained that in the notes at the end of the script.

Change[FONT=Courier New] true[/FONT] to [FONT=Courier New]false[/FONT].

@dcjonesauthorNov 26.2010 — #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 );
 }
 [/CODE]

[CODE]
 })( 'myimage.gif', 2000, true );
 [/CODE]

and my last question, should the script to in the iFrame or its parent page.

Again, many thanks for all your time.

Dereck

@A1ien51Nov 26.2010 — #Why the full page refresh?

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

Eric

@dcjonesauthorNov 26.2010 — #Hi all,

This is driving me mad.

I have the following in my main web page:

<i>
 </i>&lt;script type='text/javascript'&gt;
 
 (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

@A1ien51Nov 26.2010 — #

[CODE]location.reload( true );
 [/CODE]

The [I]true [/I]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

@dcjonesauthorNov 26.2010 — #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

@A1ien51Nov 26.2010 — #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[/CODE]

Eric

@dcjonesauthorNov 26.2010 — #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

@dcjonesauthorNov 27.2010 — #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_AliNov 27.2010 — #Hi Logic Ali,

Sorry to be a pain in the neck.

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

<i>
 </i>if( notify )
 alert( 'reloading' );
 
 location.reload( true );
 }

<i>
 </i>})( '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[/quote]

So you just want to reload the iframe.

This script goes in the main page.

&lt;script type='text/javascript'&gt;
 
 (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();
 
 })([B] 'myimage.gif', 'if1', 2000, true[/B] );
 
 &lt;/script&gt;

There are now 4 parameters. The second is the ID of the target iframe. Instead of alerting when the last parameter is set to [FONT=Courier New]true[/FONT], messages appear in the title bar instead (document must have a <title> set).

@dcjonesauthorNov 27.2010 — #Hi Logic Ali,

Thanks for getting back to me with this issue.

I have inserted your code but when I run the script, the main page loads along with the iframe page. If the internet connection is disabled the page continues to display until the iframe calls for its refresh. When this happens the main page is still displayed but the iframe page is blank with the message "Internet Explorer cannot display the webpage"

I then enable the internet connection but the ifame is not reloaded.

Am I missing somthing. I have placed the complete page below:

Once again, many thanks for your time.

<i>
 </i>&lt;?php
 if (!isset($_SESSION)) {
 session_start();
 }
 
 $date = date("l jS  F Y", time());
 $time = date("h:i A", time());
 
 ?&gt;
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 
 &lt;title&gt;Project page&lt;/title&gt;
 &lt;script type='text/javascript'&gt;
 
 (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();
 
 })( 'images/myimage.gif', 'if1', 2000, true );
 
 &lt;/script&gt;
 
 
 
 
 &lt;link href="css/boardsstyle.css" rel="stylesheet" type="text/css" /&gt;
 
 &lt;/head&gt;
 
 &lt;body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" &gt;
 
 &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"  &gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper"&gt;
 &lt;tr&gt;&lt;td width="24%" valign="middle" bgcolor="#FFFFFF"&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td width="56%" valign="middle" bgcolor="#FFFFFF" class="mainheader"&gt;&lt;div align="center"&gt; DEPARTURES&lt;/div&gt;&lt;/td&gt;
 &lt;td width="20%" align="center" bgcolor="#FFFFFF" class="timedate"&gt;&lt;img src="images/myimage.gif" width="1" height="1" border="0" /&gt;&lt;?php print $date; ?&gt;&lt;/td&gt;
 &lt;/tr&gt;
 
 
 
 <i>    </i>          &lt;tr&gt;
 <i>    </i>            &lt;td height="100%" colspan="3" align="center"&gt;&lt;iframe id="if1" src="departframe.php" width="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" &gt;&lt;/iframe&gt;&lt;/td&gt;
 
 &lt;script type="text/javascript"&gt;
 function resizeIframe() {
 var height = document.documentElement.clientHeight;
 height -= document.getElementById('if1').offsetTop;
 height -= 20; 
 document.getElementById('if1').style.height = height +"px";
 };
 document.getElementById('if1').onload = resizeIframe;
 window.onresize = resizeIframe;
 &lt;/script&gt;
 &lt;/tr&gt;
 &lt;/table&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;&lt;/td&gt;
 &lt;/tr&gt;
 
 
 <i>    </i>&lt;/table&gt;
 <i>    </i>  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 &lt;?php
 mysql_free_result($arrive);
 ?&gt;

@Logic_AliNov 27.2010 — # If the internet connection is disabled the page continues to display until the iframe calls for its refresh. When this happens the main page is still displayed but the iframe page is blank with the message "Internet Explorer cannot display the webpage"

I then enable the internet connection but the ifame is not reloaded.
[/quote]You're running the code before the iframe is rendered.

Put that block of code somewhere below the iframe.

@dcjonesauthorNov 27.2010 — #Hi Logic Ali,

Its the pain in the neck again, sorry.

I (we) are so close to resolving this issue.

I can now see the title bar displaying the messages when the internet is disabled and changes to "Load OK" when the connection is enabled but the iframe des not load.

If you have the facility to disable your internet you can see what is happening here:

http://www.navexorg.com/vanilla/depart.php

I am so grateful for your help.

Dereck

@dcjonesauthorNov 28.2010 — #Hi Logic Ali,

I have resolved the issue, but without your help a resolution would not have been possible.

Many, many thanks for all your time.

Dereck

@dcjonesauthorNov 28.2010 — #Hi Logic Ali,

I have openned a new thread because I am still having a issue with the code,

when the internet connection is lost the browser displays "Attempting iframe reload" which is great. But when the connection is live again the browser displays the message "Loaded OK" but the iframe does not load.

Any ideas as to why. Again thanks for your time.

<i>
 </i>(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();
 
 })( 'images/myimage.gif', 'if1', 2000, true );

@FangNov 28.2010 — #I have openned a new thread because I am still having a issue with the code[/QUOTE]Don't do this, users can not follow the thread history, always bump your existing thread.

@dcjonesauthorNov 28.2010 — #Hi Fang,

Sorry for reposting in a new thread, I was not sure if I could add to a closed thread.

@FangNov 28.2010 — #It wasn't closed just resolved. No harm done.

@dcjonesauthorNov 28.2010 — #Hi Logic Ali,

I have been trying to find out why the iFrame will not load.

Just to get it right in my head I have the following:

The iFrame id is "if1".

On line 1 I have "(function ( img, if1, wait, notify )"

with the third element the same name as the iFrame id.

Then on line 4 "theIframe = document.getElementById( if1 ),"

with the getElementById set to the same as the iFrame id.

On line 35 I hame })( 'images/myimage.gif', 'if1', 2000, true );

with the third element the same as the iFrame id.

Is this all correct? Sorry to be a pain in the neck but I need to get this to work.

<i>
 </i>&lt;iframe id="if1" src="departframe.php" &lt;/iframe&gt;
 
 (function ( img, if1, wait, notify )
 {
 var iObj = new Image(),
 theIframe = document.getElementById( if1 ),
 
 <i>    </i> 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();
 
 })( 'images/myimage.gif', 'if1', 2000, true );

@dcjonesauthorNov 29.2010 — #Hi,

I have been working on this all weekend with no result.

Can anyone see why the page will not refresh.

Many thanks in advance.

Dereck

Also in #JavaScript _↴

Problem: Ajax and Sending Form submit() / Window closed Ultimate equivalence of PHP's isset

Success!

Help @dcjones spread the word by sharing this article on Twitter...

Tweet This

Refresh browser on lost internet connection

24 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Refresh browser on lost internet connection

24 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #JavaScript _↴