Javascript reload all windows

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.

Источник

JavaScript Refresh Page: The Trendiest Methods Among JS Developers

The JavaScript refresh page options are many and each one is unique. If you are wracking your brain about JavaScript page reload, then look no further! This post explains the standard techniques you can use to refresh a page in JavaScript. Read on to discover which method suits your coding project.

• How To Refresh Page JavaScript: Different Methods You Can Use
  • – Location: Reload() Method or Window.location.reload()
  • – Code Example
  • – Window.location Expansive Uses
  • – Window.location.reload() Method: Conditions for Use
  • – Cache vs. Web and Application Server Reloads
  • False: The Default Parameter
  • – True: JavaScript Force Refresh Method
  • – Creating an HTML Button for Browser-Provided “Refresh”-Option
  • – Automatic Refreshes
  • – The timeRefresh Command: HTML Refresh
  • – The setTimeout Function
  • – SetInterval() Method
  • – Window.location.href
  • – Using History Object: History.go()
  • – Event-Based Reload in JavaScript

  How To Refresh Page JavaScript: Different Methods You Can Use

  Refreshing a JavaScript page is very necessary for any JavaScript developer. In this section, you will learn the different methods to refresh or reload a page using JavaScript:

  – Location: Reload() Method or Window.location.reload()

  Just like the refresh button, the location.reload() method will reload the page at the current URL.

  This is the syntax you can use for this method:

  The JavaScript page reload syntax above can reload a page based on the requirements provided. However, you must use the window.location as the object.

  – Code Example

  Output

  – Window.location Expansive Uses

  The chances of running into issues while using the window reload JavaScript are less than other methods. Typically, the window reload method, window.location can be used for:

  • Getting the current URL/ pages address
  • Redirecting the browser to another page
  • Reloading the same page

  Note that the window in JavaScript represents the window that is open in a browser. On the other hand, location in JavaScript has information about the existing URL. Therefore, the location object is just like a fragment of the entire window object, and you invoke it using the window.location property.

  What’s more, the location object in JavaScript has three methods:

  • Reload(). This technique is used to reload the existing document
  • Assign(). This method loads a new document
  • Replace(). This method replaces the current document with a new one

  Since our interest is to reload the same page, we use the reload() method .

  – Window.location.reload() Method: Conditions for Use

  The window.location.reload() method may not always reload a page. More often, you may encounter the SECURITY_ERROR DOMException error. This error blocks reloading, and therefore you need to ensure that you do not encounter such an error.

  The SECURITY_ERROR DOMException error typically occurs when there is a difference between the script’s origin invoking the window.location.reload() method and the page’s source that owns the location object. Therefore, the best way to evade the SECURITY_ERROR DOMException error is to ensure that the origin of the calling script and the origin of the page owning the location object are similar.

  It is worth noting that location.reload() does not have an argument or a parameter. Thus, the method does not pass a parameter or an argument when using it. The technique works differently in different browsers but gives similar results.

  In Firefox, there is a forceGet boolean parameter for location.reload().ForceGet instructs Firefox to bypass its cache and force-reload the current document. Typically, Firefox has a boolean value of either true or false, which determines how to use the location.reload method. For other browsers, when you specify any parameter in a location.reload(), the call will be ignored.

  – Cache vs. Web and Application Server Reloads

  You can retrieve two values when using the window.location.reload() methods. These are true or false. These two values determine whether the reloading will occur using the browser cache or web servers:

  False: The Default Parameter

  By default, the location.reload() methods will refresh the page from the browser’s cache and not from the servers.

  Syntax

  window.location.reload(false);

  In the case that you leave it blank, object.reload() refreshes a page using the cached data in the browser similar to using object.reload(false).

  – True: JavaScript Force Refresh Method

  “True” will refresh the web page from the web server or web application. That is, it does not store the data cached by the browser. So, to reload a page from the browser, you must set the forceGet parameter to true.

  Syntax

  – Creating an HTML Button for Browser-Provided “Refresh”-Option

  You may want to create an HTML button to create the effect of the browser-provided “Refresh”moption. What’s more, the HTML button can help accomplish the following:

  • Assigning an on-click event to the button with the function that uses the method. The button will be similar to:

  Predefined JavaScript function, onClick(), can trigger a new event and open a new page window on a particular location. If you want to identify the location of the new web pages, use href default HTML attributes.

  – Automatic Refreshes

  You can also refresh a page automatically at specified intervals, but you will need additional JavaScript features. The two prominent features are the timeRefresh command, the setTimeout function, and the setInterval() method . Let’s check them both out below:

  – The timeRefresh Command: HTML Refresh

  If JavaScript is not enabled in your browser, you can use HTML to reload a page automatically after the page has loaded fully by using the HTML meta tag.

  In this scenario, you will need to define the meta tag – http-equiv meta tag, as we’ve done here for example:

  This will reload the page after four seconds. Here content=”30″ is equal to 30 seconds.

  – The setTimeout Function

  The setTimeout() is an inbuilt JavaScript method. Furthermore, this JavaScript method is designed to call a function after a specified number of milliseconds.

  Syntax of setTimeout Function

  Example Using the setTimeout Function

  Let’s assume, then that you want to reload a page after 30 seconds. If that is the case, then you should use the code:

  setTimeout(function() location.reload(); >, 30000);

  JavaScript adds this code to any event you want. For instance,

  var theDiv = document.querySelector(“div”); // When the div is clicked, wait 30 seconds and then hide it. theDiv.addEventListener(“click”, function() setTimeout(function() theDiv.classList.add(“hide”); >, 30000); >);

  – SetInterval() Method

  The setTimeout() method is only executed once, so if you need it repeated, use setInterval() method , which calls a function at specified intervals, and it continues calling the function until you clear it. To clear it, invoke clearInterval().

  SetInterval Syntax

  Code Example For the SetInterval() Method

  The setInterval() method takes two parameters, a code to execute and a delay in milliseconds that runs the code. Similarly, the code can be a function. The code example below invokes a user-defined function:

  window.setInterval(‘refresh()’, 20000); // Call a function every 20000 milliseconds (OR 20 seconds). // Refresh or reload page. function refresh() window .location.reload(); >

  Therefore, the page will refresh after every 20000 milliseconds or 20 seconds. Similarly, you can use the setInterval() method to set a countdown to show the seconds left before the page refreshes automatically. Moreover, the method updates a element every second.

  Alternative Methods

  – Window.location.href

  This method returns the href (URL) of the active web page. So, to Return the href property, use location.href. but if you want to set the href property, use location.href = URL.

  Syntax For Window.location.href

  The syntax above will reopen the web page with the current URL.

  Window.location.href Coding Example

  You can modify the location.href property, to instruct the browser to redirect to a specific URL. That implies that you can reload the active web page by redirecting to the current URL.

  window.location.href = ‘http://www.google.com’; //reloads Google

  However, the window.location.href will not reload a page if the existing URL contains an anchor #. If you do not need the #, then remove it but if it must exist, use window.location.reload().

  Additionally, this method reloads a page without including the POST data. Also note that window.location.href is similar to window.location.href.split(‘#’)[0].

  – Using History Object: History.go()

  The history.go() function loads a specific page from the browsing session history. You can use this JavaScript method to navigate backward or forward through the history-based to the parameter value provided.

  Syntax and Coding Example For History.go()

  A negative value moves the page backward, while a positive value moves the page forward. To refresh the current page, pass no value or delta = 0. This is similar to invoking location.reload() . So, to reload the current page, use the code below:

  This technique has a limitation: it does not work on Internet Explorer 6 to 9 so keep that in mind.

  – Event-Based Reload in JavaScript

  You can also refresh based on the offered user events, such as clicking a button. This method has no specific use case as each JavaScript developer can have their requirements; thus, the use-case can vary.

  Here is a code example that utilizes JQuery as the JS framework:

  $(“#refreshButton”).click(function() );

  Conclusion

  In this article, we have covered:

  • Methods of refreshing a page in JS. They are location.reload() method, Window.location.href, History.go(), and Event-based reload
  • Window.location evaluates to a location object with the current location information of the document
  • Window.location has three uses: getting the existing page URL, redirecting the browser to another page, and reloading the current page
  • Window.location.href refreshes a page without including POST data
  • History.go() method allows you to manipulate the history of a browser session. You can reload the active page or move backward and forward using given values.

  

  Predominantly, every JavaScript user uses the window.location.reload() as it offers more options when reloading, and is also is pretty straightforward. What’s more, with the elaborate examples on other JavaScript window refresh methods that we’ve provided, refreshing or reloading web pages in JavaScript should be easier.

  Источник