Javascript Refresh / Reload

Mon, 14/01/2008 - 12:01

link:

http://www.grizzlyweb.com/webmaster/javascripts/refresh.asp

The following Javascript from Grizzlyweb allows the webmaster to refresh (reload) any web page in different ways. I jotted down this script because after trying quite a few, this was the only one working on all the versions of the main browsers (Internet Explorer, Safari, Firefox, Opera), other than allowing two main refresh methods: automatic and with the use of a link (button).

Javascript Refresh Automatico

This version uses an under-utilized method of dealing with cross browser and old version browser compatibility. It defines multiple JavaScript code blocks, where each JavaScript version block redefines the same function. Only the last version block that is supported by the browser will be used. So older browsers will use the "JavaScript" block, while later browsers will use either the "JavaScript1.1" or "JavaScript1.2" block depending upon the browser's capabilities. If the browser does not support JavaScript or has it disabled, the "noscript" block will be used.

<html>

<head>
<title>Refresh JavaScript Example</title>
<noscript>
<!--
    We have the "refresh" meta-tag in case the user's browser does
    not correctly support JavaScript or has JavaScript disabled.

    Notice that this is nested within a "noscript" block.
-->
<meta http-equiv="refresh" content="2">

</noscript>

<script language="JavaScript">
<!--

var sURL = unescape(window.location.pathname);

function doLoad()
{
    // the timeout value should be the same as in the "refresh" meta-tag
    setTimeout( "refresh()", 2*1000 );
}

function refresh()
{
    //  This version of the refresh function will cause a new
    //  entry in the visitor's history.  It is provided for
    //  those browsers that only support JavaScript 1.0.
    //
    window.location.href = sURL;
}
//-->
</script>

<script language="JavaScript1.1">
<!--
function refresh()
{
    //  This version does NOT cause an entry in the browser's
    //  page view history.  Most browsers will always retrieve
    //  the document from the web-server whether it is already
    //  in the browsers page-cache or not.
    //  
    window.location.replace( sURL );
}
//-->
</script>

<script language="JavaScript1.2">
<!--
function refresh()
{
    //  This version of the refresh function will be invoked
    //  for browsers that support JavaScript version 1.2
    //
    
    //  The argument to the location.reload function determines
    //  if the browser should retrieve the document from the
    //  web-server.  In our example all we need to do is cause
    //  the JavaScript block in the document body to be
    //  re-evaluated.  If we needed to pull the document from
    //  the web-server again (such as where the document contents
    //  change dynamically) we would pass the argument as 'true'.
    //  
    window.location.reload( false );
}
//-->
</script>
</head>

<!--
    Use the "onload" event to start the refresh process.
-->
<body onload="doLoad()">

<script language="JavaScript">
<!--
    // we put this here so we can see something change
    document.write('<b>' + (new Date).toLocaleString() + '</b>');
//-->
</script>


</body>

</html>

Javascript Refresh Link (bottone)

A similar Javascript to reload the page when the user clicks on a link, on an image button or on a form button:

<html>

<head>
<title>Refresh Button Example</title>
<script language="JavaScript">
<!--

//  The "refresh" function implementations are identical
//  to our regular "JavaScript-Refresh" example.  The only
//  difference from our JavaScript Refresh example is
//  we do not have a doLoad function that starts our
//  refresh timer (since we use a refresh button).

var sURL = unescape(window.location.pathname);

function refresh()
{
    window.location.href = sURL;
}
//-->
</script>

<script language="JavaScript1.1">
<!--
function refresh()
{
    window.location.replace( sURL );
}
//-->
</script>

<script language="JavaScript1.2">
<!--
function refresh()
{
    window.location.reload( false );
}
//-->
</script>
</head>

<body>

<script language="JavaScript">
<!--
    // we put this here so we can see something change
    document.write('<b>' + (new Date).toLocaleString() + '</b>');
//-->
</script>

<!--

    In every example that we use below, we simply call the "refresh"
    JavaScript function.
    
    Our first example uses a "link" that invokes the JavaScript function.
-->
<p><a href="javascript:refresh()">Refresh Link</a></p>

<!--
    The "image" button is nothing more than an image nested in a link.
-->
<p><a href="javascript:refresh()"><img src="images/button_green.gif" border="0"
align="middle" width="71" height="70"></a>image as a button</p>

<!--
    The last method ties into the "onclick" event for a form button.
-->
<form method="GET" action="refreshbutton.htm">
  <p><input type="button" onclick="refresh()" value="Refresh Form Button"
  name="button1"></p>
</form>

</body>

</html>

Note: all the credits for the script go to Grizzlyweb, please follow the main link of this resource for more info or just leave your comments below.

Similar:

This could loop out

Submitted by Michigan Web Design on Thu, 17/12/2009 - 02:17.

Carefully code the thing or et wel trigger the overbuffer protection.

reply

Excellently written article,

Submitted by Zoran on Sat, 21/03/2009 - 05:37.

Excellently written article, if only all bloggers offered the same content as you, the internet would be a much better place. Please keep it up! Cheers.