JavaScript Refresh Page

In JavaScript, you refresh the page using document.location.reload(). You can add the true keyword to force the reloaded page to come from the server (instead of cache). Alternatively, you can use the false keyword to reload the page from the cache.

This code can be called automatically upon an event or simply when the user clicks on a link.

Example JavaScript Refresh Code

<input type="button" value="Reload Page" onClick="document.location.reload(true)">

<p>Clicking the above button will refresh the page/frame.</p>
<img src="/pix/samples/4s.jpg" alt="Sample image">

Auto-Refresh

You can also use JavaScript to refresh the page automatically after a given time period. Here, we are refreshing the page 5 seconds after the page loads. This results in the page continuously refreshing every 5 seconds.

<html>
<head>
<title>Example</title>
<script>
<!--
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}

window.onload = timedRefresh(5000);

//   -->
</script>
</head>
<body>
<p>This page will refresh every 5 seconds. This is because we're using the 'onload' event to call our function. We are passing in the value '5000', which equals 5 seconds.</p>
<img src="/pix/samples/4s.jpg" alt="Sample image">
<p>But hey, try not to annoy your users too much with unnecessary page refreshes every few seconds!</p>
</body>
</html>

You can achieve the same effect using the HTML meta tag.

Other Refresh Tricks

By including your refresh code in a function, you can have complete control over when the page is refreshed.

Example 1

Instead of having the "page refresh" function called automatically when the page loads, you can call it only when the user performs some action - such as clicking on a link.

<script>
<!--
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>

<p><a href="javascript:timedRefresh(2000)">Refresh this page in 2 seconds</a></p>
<p><a href="javascript:timedRefresh(5000)">Refresh this page in 5 seconds</a></p>
<img src="/pix/samples/4s.jpg" alt="Sample image">

Example 2

You can use conditional statements to determine whether or not to refresh the page. Here's a basic example of using a "confirm" box to ask the user if it's OK to refresh the page.

<script>
<!--
function confirmRefresh() {
var okToRefresh = confirm("Do you really want to refresh the page?");
if (okToRefresh)
	{
			setTimeout("location.reload(true);",1500);
	}
}
// -->
</script>

<p><a href="javascript:confirmRefresh();">Refresh Page</a></p>
<img src="/pix/samples/4s.jpg" alt="Sample image">

By incorporating refresh code with a JavaScript function, you can trigger a refresh at any time that makes sense to your web application.

HTML Refresh

The above examples will only work as long as the user has JavaScript enabled on their browser. You can also use HTML to refresh a page automatically once the page has loaded. This is achieved by using the HTML meta tag.

Qhmit.com

JavaScript Refresh Page

Example JavaScript Refresh Code

Auto-Refresh

Other Refresh Tricks

Example 1

Example 2

HTML Refresh

Related