일반 Page Refresh/Reload

황제낙엽 2007.08.24 16:16 조회 수 : 517 추천:152

sitelink1 http://www.grizzlyweb.com/webmaster/javascripts/refresh.asp 
sitelink2  
sitelink3  
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 Refresh

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

See this script in action.

 

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

A similar JavaScript will refresh/reload the page when the visitor clicks on a link, on an image/button, or a form button.  In similar fashion we use the technique that will replace the current page with each refresh in the visitor's page history.

See this script in action.

 

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

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

See this script in action.

 

<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>
이 게시물을
목록
쓰기 태그