Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
Refreshing or reloading a web page in JavaScript isn’t all that difficult. There is the straightforward window.location.reload (or just location.reload) method, and then there are a few less intuitive approaches that achieve the same effect. In the this lesson, I’ll show two examples of how to reload a web page using JavaScript. Get ready to get reloaded!
First, the aforementioned location.reload method: This method is inherent to the location property of the global/window object. Using it might look something like this:
function reload() { location.reload(); } document.querySelector("button").addEventListener("click", reload);
Live code example: https://jsfiddle.net/c5gntsfh/
The method is pretty self-explanatory, however it does take an optional argument whose functionality and purpose may not be immediately apparent. The optional argument taken by the reload method is meant to be a boolean value of either true or false. If there is no argument passed (like in the examples above), then the method behaves the same as if the value of false was passed to it. In both cases, the browser will try to reload the page from its cached source. Conversely, if a value of true is passed to the reload method (e.g., location.reload(true);), then the browser will reload the page from the original server location.
Okay great! We’ve got the reload method now, but the location.reload method isn’t the only means for achieving a page reload in JavaScript. What’s more, sometimes you may find yourself needing to get around blocking of the reload method that some pages will do. For example, on CodePen (https://www.codepen.io), for whatever reason, the developers behind application decided to remove the location.reload method. So… what can we do instead?
Instead of using the location.reload method, we can simply set the location.href property to its current value. Doing so essentially causes the browser to reload. For example:
var reload = function() { location.reload(); } setTimeout(reload, 1000); //Uncaught TypeError: location.removedByCodePen is not a function //WHOOPS! //Okay, let's try... reload = function() { location.href = location.href; } setTimeout(reload, 2000); //Bingo! Notice the little reload icon in your browser changing every 2 secs. //We got around the blocking and the page is being reloaded every 2 secs!
Live code example: https://codepen.io/anon/pen/PNgLOw?editors=0010
*Do note that neither of the above approaches refresh the console like actually clicking the reload button in your browser will; just something to be aware of…
More on the global/window object’s location and associated properties (location.href is the first property listed): https://developer.mozilla.org/en-US/docs/Web/API/Location
So there you have it! Two ways to reload a page in JavaScript; one relatively straightforward, and one perhaps a bit more obscure. Both have their place and the reasons for using each should be considered when writing your scripts.
Now get out there and reload some pages! :)
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.