JavaScripts Page Refresh/Reload

"Page Redirection" for techniques of redirecting or forwarding one page to another.

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

    JavaScript Button Refresh

    meta-tag - provided for reference but not the preferred method.

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.

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.

Refresh Link

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