JavaScript Refresh Page

Related:
• Meta Refresh
• JavaScript Redirect

In JavaScript, you refresh the page using location.reload.

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

Example JavaScript Refresh code

Typing this code:

<!-- Codes by Quackit.com -->
<a href="javascript:location.reload(true)">Refresh this page</a>

Results in this:

Refresh this page

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.

This code...

<!-- Codes by Quackit.com -->
<html>
<head>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(5000);">
<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>
<p>But hey, try not to annoy your users too much with unnecessary page refreshes every few seconds!</p>
</body>
</html>

View the result (opens in new window)

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.

This code...

<!-- Codes by Quackit.com -->
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
<p>
<a href="javascript:timedRefresh(2000)">Refresh this page in 2 seconds</a> |
<a href="javascript:timedRefresh(5000)">Refresh this page in 5 seconds</a>
</p>
</div>

Results in this:

Refresh this page in 2 seconds | Refresh this page in 5 seconds

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 language="javascript" type="text/javascript" >
<!--
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>

Results in this:

Refresh Page

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.

JavaScript Tutorial

JavaScript Reference

JavaScript Examples

JavaScript Refresh Page

Example JavaScript Refresh code

Auto-Refresh

Other Refresh Tricks

Example 1

Example 2

HTML Refresh

Enjoy this website?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING

JavaScript Home JavaScript Tutorial Introduction How to Enable JavaScript JavaScript Syntax JavaScript Popup Boxes JavaScript and HTML External JavaScript File JavaScript Operators JavaScript Variables JavaScript Functions JavaScript Events JavaScript If Statements JavaScript Switch Statements JavaScript While Loop JavaScript For Loop JavaScript Try Catch JavaScript Escape Characters JavaScript Void(0) JavaScript Cookies JavaScript Date and Time JavaScript Arrays Two Dimensional Arrays JavaScript innerHTML JavaScript Summary JavaScript Reference JavaScript Reserved Words JavaScript Event Handlers JavaScript Date and Time Functions JavaScript Examples List of Examples JavaScript Dropdown Menu JavaScript Print JavaScript Alert Box JavaScript Confirm JavaScript Prompt JavaScript Status Bar Messages Image Rollovers Popup Windows JavaScript Redirect Timed JavaScript Redirect JavaScript Refresh Page
	JavaScript Refresh Page Related: • Meta Refresh • JavaScript Redirect In JavaScript, you refresh the page using `location.reload`. This code can be called automatically upon an event or simply when the user clicks on a link. Example JavaScript Refresh code Typing this code: <!-- Codes by Quackit.com --> <a href="javascript:location.reload(true)">Refresh this page</a> Results in this: Refresh this page 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. This code... <!-- Codes by Quackit.com --> <html> <head> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> </head> <body onload="JavaScript:timedRefresh(5000);"> <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> <p>But hey, try not to annoy your users too much with unnecessary page refreshes every few seconds!</p> </body> </html> View the result (opens in new window) 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. This code... <!-- Codes by Quackit.com --> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> <p> <a href="javascript:timedRefresh(2000)">Refresh this page in 2 seconds</a> \| <a href="javascript:timedRefresh(5000)">Refresh this page in 5 seconds</a> </p> </div> Results in this: Refresh this page in 2 seconds \| Refresh this page in 5 seconds 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 language="javascript" type="text/javascript" > <!-- 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> Results in this: Refresh Page 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. Enjoy this website? Share Add this page to your Favorites Link to this page (copy/paste into your own website or blog): <a href="http://www.quackit.com/javascript/javascript_refresh_page.cfm">JavaScript Refresh Page</a> from Quackit.com Link to Quackit using one of these banner ads. Help support Quackit by making a donation Oh, and thank you for supporting Quackit!