| sitelink1 | http://www.grizzlyweb.com/webmaster/javascripts/refresh.asp |
|---|---|
| sitelink4 | http://1 |
| extra_vars4 | ko |
| extra_vars5 | ko |
| extra_vars6 | sitelink1 |
|
There are times when the web-author would like their web-page to automatically refresh (or reload) at specified intervals. This is often useful when the page contains time sensitive information. We discuss three versions:
JavaScript RefreshThe preferred page refresh/reload method uses a JavaScript technique that will replace the current page with each refresh in the visitor's page history. 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. We do use the "refresh" meta-tag as a backup method to the JavaScript. |
<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>
|
<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>
|
"refresh" meta-tagThe biggest problem with the "refresh" meta-tag method of page-refresh is that it can add to the visitor's page-history on various versions of browsers. This means that for each automatic page refresh/reload your site visitor must select the browser's back button. This potentially can be a considerable bother to your visitors as well as a confusion. The preferred refresh method is "JavaScript Refresh" |
<head>
<!--
The "refresh" meta-tag's content identifies the number of
seconds to delay before refreshing the current document.
Notice that the URL tag is not specified, indicating that
the current document will be refreshed.
-->
<meta http-equiv="refresh" content="2">
</head>
|
