Page Reload Uisng Javascript

How to Refresh a Web Page in JavaScript?

While using JavaScript, you may want to refresh a web page with your code. Let us look at the different ways to do so.

We will here learn the following methods to refresh a web page in JavaScript:

1. Refreshing a Page in JavaScript

In JavaScript, page is reloaded using the document.location.reload() method or the window.location.reload() method. The location.reload() method gives the same result as pressing the reload button on your browser.

This method reloads the page from directly the browser’s cache by default. If the forceGet property is set to true, the web page will be reloaded from the server.

Reload Page from Cache

Example

Reload Page from Server (without Cache)

The default parameter is False here. So, if the parameter is left blank, object.reload() reloads the page using the broswer’s cached data, i.e. is identical to using the method as object.reload(false).

2. Auto Refresh Page After 5 Second

You can also use JavaScript to refresh the web page automatically after a specified interval. Using the setTimeout() method here, we are refreshing the page automatically 5 seconds after it reloads.

3. Refresh Page on Button Click

Instead of automatically refreshing a web page using a method, you can call the method when a user performs an event, such as a button click. In this example, you can see that page will get refreshed using the location.reload() method after the user clicks on the Reload Page button.

4. Using History Function

Example

The JavaScript, the window object has a history property which is used for page refreshing. The history.go() method in this example helps in manipulating the browser session history.

Here 0 is the history parameter,

This parameter lets you navigate back and forth within your web page session history.

5. Refresh Page in HTML

The code will refresh the HTML document after every 1 second. The http-equiv is set to refresh and the content attribute is set to the interval of 1 second.

6. Using Jquery

The window.location has a href property. This returns the URL of the current website. In this example, this property is used for reloading and refreshing the current page. This property can also be used to target another page and refresh it.

Источник

Refresh the Page in JavaScript – JS Reload Window Tutorial

Joel Olawanle

When you’re developing applications like a blog or a page where the data may change based on user actions, you’ll want that page to refresh frequently.

When the page refreshes or reloads, it will show any new data based off those user interactions. Good news – you can implement this type of functionality in JavaScript with a single line of code.

In this article, we will learn how to reload a webpage in JavaScript, as well as see some other situations where we might want to implement these reloads and how to do so.

Here’s an Interactive Scrim about How to Refesh the Page in JavaScript

How to Refresh a Page in JavaScript With location.reload()

You can use the location.reload() JavaScript method to reload the current URL. This method functions similarly to the browser’s Refresh button.

The reload() method is the main method responsible for page reloading. On the other hand, location is an interface that represents the actual location (URL) of the object it is linked to – in this case the URL of the page we want to reload. It can be accessed via either document.location or window.location .

The following is the syntax for reloading a page:

Note: When you read through some resources on “page reload in JavaScript”, you’ll come across various explanations stating that the relaod method takes in boolean values as parameters and that the location.reload(true) helps force-reload so as to bypass its cache. But this isn’t the case.

According to the MDN Documentation, a boolean parameter is not part of the current specification for location.reload() — and in fact has never been part of any specification for location.reload() ever published.

Browsers such as Firefox, on the other hand, support the use of a non-standard boolean parameter known as forceGet for location.reload() , which instructs Firefox to bypass its cache and force-reload the current document.

Aside from Firefox, any parameters you specify in a location.reload() call in other browsers will be ignored and have no effect.

How to Perform Page Reload/Refresh in JavaScript When a Button is Clicked

So far we have seen how reload works in JavaScript. Now let’s now see how you can implement this could when an event occurs or when an action like a button click occurs:

Note: This works similarly to when we use document.location.reload() .

How to Refresh/Reload a Page Automatically in JavaScript

We can also allow a page refersh after a fixed time use the setTimeOut() method as seen below:

Using the code above our web page will reload every 3 seconds.

So far, we’ve seen how to use the reload method in our HTML file when we attach it to specific events, as well as in our JavaScript file.

How to Refresh/Reload a Page Using the History Function in JavaScript

The History function is another method for refreshing a page. The history function is used as usual to navigate back or forward by passing in either a positive or negative value.

For example, if we want to go back in time, we will use:

This will load the page and take us to the previous page we navigated to. But if we only want to refresh the current page, we can do so by not passing any parameters or by passing 0 (a neutral value):

Note: This also works the same way as we added the reload() method to the setTimeOut() method and the click event in HTML.

Wrapping Up

In this article, we learned how to refresh a page using JavaScript. We also clarified a common misconception that leads to people passing boolean parameters into the reload() method.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

Window location.reload()

The reload() method does the same as the reload button in your browser.

Syntax

Parameters

Return Value

Browser Support

location.reload() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Refresh or Reload Page using JavaScript

In this tutorial, you will learn how to refresh or reload page using JavaScript.

Sometimes we need to refresh or reload page of a website to load data. As the page refresh or reload is related to client side programming, so we can easily do this using JavaScript. There are methods in JavaScript such as location.reload() , location.href , history.go(0) in JavaScript to load page as per our requirement. We can set timeout or interval to load or refresh page on every given time.

So here we will explain different ways with examples to handle page refresh or reload using JavaScript.

1. Manually Reload Page with JavaScript

In manual page reload, we can implement the page reload functionality when user click a button. In below example code, we have created a button element and called a function reloadPage() on onclick event.

In function reloadPage() , we have called location.reload() method to reload page.

2. Manually Reload Page with jQuery

We can also implement manual page reload using JavaScript libraray jQuery. In below example, we have created an button element with id page_reload_button . We will call function reloadPage() when button clicked.

We will implement jQuery click event and call function reloadPage() when button clicked to reload the page.

 $(document).ready(function() < $('#page_reload_button').click(function () < reloadPage(); >); >); function reloadPage()

3. Automaticaly Load Page with JavaScript

We can refresh or reload the page automatically using timer. We can use the setInterval() function to set the time interval to refresh or reload the page.

 function reloadPage() < location.reload(); >setInterval('reloadPage()', 1000); 

We can also use the setTimeout() to time interval for page refresh automatically.

4. Automaticaly Refresh or Reload Page with jQuery

We can also implement the auto page refresh or reload using jQuery. We will call the function reloadPage() when page is loaded like below example.

 function reloadPage() < location.reload(); >$(document).ready(function() < setInterval('reloadPage()', 10000); >); 

We can also implement auto page refresh or reload with jQuery by calling function setTimeout() to load function on time interval.

 $(document).ready(function() < setTimeout(function()< reloadPage(); >,10000); >); 

5. Auto Refresh or Reload Page using history.go() in JavaScript

We can also handle the page refresh using window.history property. As the JavaScript window object has history property and we can this to refresh the page. The history.go(0) is used for soft page refresh as it loaded page from the browsers cached, stored somewhere in memory. Here we have used history.go(0) to refresh the page.

6. Auto Refresh or Reload Page using window.location.href in JavaScript

The window.location.href can be used to reload the page as it just change the URL of page and page reloaded. But unlike location.reload() which resend POST data if exists (the browser will ask you if you want to reload the page and resend the data), the window.location.href just change the page URL and ignores POST data.

 window.location.href = window.location.href; 

You may also like:

• Follow and Unfollow System with PHP & MySQL
• GST Billing System with PHP & MySQL
• Restaurant Management System with PHP & MySQL
• Visitor Management System with PHP & MySQL
• Student Attendance System with PHP & MySQL
• Like and Dislike System with Ajax, PHP & MySQL
• Build Star Rating System with jQuery, PHP & MySQL
• User Registration and Login System with PHP & MySQL
• Build Contact Form with PHP and Ajax
• To-do List Application with Ajax, PHP & MySQL
• Build Event Calendar with jQuery , PHP & MySQL

Источник