Javascript Page Refresh with Examples

Udemy Editor

JavaScript is the language that adds interactivity to a web page. Before JavaScript, web pages weren’t interactive. For example, whenever you had to fill out a web form, you had to fill out your information, hit the submit button and then wait for the webpage to reload. You would then be informed whether the form had been accepted by the server. If you had made a mistake in the form somewhere, you had to rectify it and then submit it again. Now, however, most websites use JavaScript, which make the process much simpler. JavaScript has made forms interactive. As soon as you’re finished filling in a blank field in the form, for example, a small tick might appear next to it if the information has been filled correctly. If you haven’t filled it correctly, a red cross might appear next to it. When you now hit the submit button, the entire web page doesn’t reload – only a part of it reloads. These are only a few simple examples of what you can do with JavaScript. Learn more about other ways you can use JavaScript in your web development with this course.

JavaScript allows a web page to communicate asynchronously with a server. Your web page doesn’t have to reload to send and retrieve data from a server. This saves a lot of time and reduces the load on a server. JavaScript is a simple language to learn, especially if you have programming experience. You can sign up for this course to learn how to program with JavaScript.

In this tutorial, we’re going to see how JavaScript can be used to refresh a webpage. This tutorial has been written for beginners – you should be able to understand it even if you have very little experience with JavaScript.

Refreshing (or Reloading) a Webpage

The reload () method in JavaScript is used to reload the webpage. The refresh button in your browser acts exactly like the reload method. The syntax of the reload method is as follows:

location.reload ();

If you call this method from anywhere in the web page, the web page will reload. This reload will occur through the web cache. What is a cache exactly? It’s a temporary space your browser reserves to store documents, images and other data that it retrieves from a server. Caching of data allows a browser to speed up your browsing and lets you reload often-visited sites faster.

You can change the default cache reload by setting a forceGet parameter. This will cause the browser to reload the webpage by fetching the data from the server anew instead of using the cache. This can be accomplished by using the following code:

location.reload(true);

By default, the value of the forceGet parameter is false. This means that the location.reload method always looks like this:

location.reload(false)

Let’s take a few examples so you can see how the location.reload method is used.

Example 1 – A Simple Page Refresh

You can call the location.reload () method from within a hyperlink. Let’s write a simple program that creates a hyperlink that reloads the web page you’re on when you click on it:

<!DOCTYPE html>
<html>
<body>
<p>Click on the Hyperlink to Reload the Page: <p>
<a href="javascript:location.reload(true)">Refresh Page</a>
<p id="example"></p>
<script>
</script>
</body>
</html>

This code will create simple hyperlink with the text “Refresh Page”. When you click on “Refresh Page”, the location.reload method will get executed by your browser and the entire page will reload. Try typing the program out and running it on your browser to see how it works. If you’re unsure of how to run a HTML program in your browser, take a look at our tutorials on HTML. Alternatively, you can just sign up for this course to learn how to run HTML programs that you can use to build a great website.

Example 2 – Using a Clickable Image to Refresh

You can also call the location reload method using an image. You can have a small icon that says “refresh” and refreshes the webpage when the user clicks on it, for example. The code for doing that is as follows:

<!DOCTYPE html>
<html>
<body>
<p>Click on the Hyperlink to Reload the Page: <p>
<a href="javascript:location.reload(true)" ><img src="refresh1.jpg" border="1"></a>
<p id="example"></p>
<script>
</script>
</body>
</html>

Here, the “refresh1.jpg” image that was present on your webpage will get turned into a clickable link. When the user clicks on it, the webpage will get refreshed.

Example 3 – Refreshing Automatically

The location.reload () method can also be set to automatically run after every few seconds. For example, you can get your web page to refresh after every 30 seconds. Let’s write a program that does just that:

<html>
<head>
<script type="text/JavaScript">
<!--
function TimedRefresh( t ) {
setTimeout("location.reload(true);", t);
}
//   -->
</script>
</head>
<body onload="JavaScript:TimedRefresh(30000);">
<p>Auto Refreshing Every 30 Seconds.</p>
</body>
</html>

This code will create a self-refreshing webpage. The reload will happen every 30 seconds. We’ve used the setTimeout () JavaScript function here. This function executes the function included in its parameters after a set time, which you can change to whatever’s convenient. In our program, the setTimeout () function is set to 30,000 milliseconds (30 seconds) and it points to the location.reload method.

Example 4 – Using a Button to Refresh

You can also link the location.reload method to a button, like you do other JavaScript functions. The code to do that is as follows:

<!DOCTYPE html>
<html>
<body>
<p>Click on Reload button to Reload the page: <p>
<input type="button" value="Refresh Page" onClick="window.location.reload()">
<p id="example"></p>
<script>
</script>
</body>
</html>

This will create a simple clickable button with the text “Refresh Page” on it. Clicking the button will call the location.reload () method, which will refresh the page.

The reload method can also be called in response to a mouse click. You can use this code to do that:

onClick="window.location.reload(true)"

The location.reload() method is a very useful method and you’ll probably be using it a lot when you build your own interactive website. To learn other useful JavaScript methods, take this comprehensive JavaScript course. Experiment with your code to better understand how things work. And very soon you’ll be writing your own interactive pages in JavaScript!