Refreshing (or Reloading) a Webpage
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:
By default, the value of the forceGet parameter is false. This means that the location.reload method always looks like this:
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:
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:
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:
Example 4 – Using a Button to Refresh
<!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: