Sure, pressing F5 is the easiest way to refresh a page. But sometimes, for user experience or functionality reasons, you might actually need to create a refresh button on the page itself.
Recently, I found myself in such a situation—and realized there are a couple of simple ways to make it happen.
Let’s explore both.
Method 1: The Classic Anchor Tag
<a href="http://www.blogger.com/url">Refresh</a>
This is as simple as it gets. Just use an anchor tag that links to the current URL.
If you’re working in PHP, you can dynamically insert the current URL using:
echo "<a href='{$_SERVER['REQUEST_URI']}'>Refresh</a>";
Pros:
- No JavaScript needed
- Works reliably in any browser
Note:
This method creates a new entry in the browser history. So if the user clicks “Back”, they might just land back on the same page again.
Method 2: JavaScript with location.replace()
echo "<script>var url = '{$_SERVER['REQUEST_URI']}';</script>";
<input onclick="location.replace(url);" type="button" value="Refresh" />
Here, we’re assigning the current URL to a JavaScript variable, and then triggering a page reload with location.replace().
This reloads the page just like the anchor method—but with a twist.
What’s the difference?
location.replace() replaces the current entry in the browser’s history, rather than adding a new one. This means if a user hits “Back” after clicking the button, they won’t go back to the refreshed page—they’ll go back to whatever page they came from.
This could be a cleaner experience in some flows.
Final Thoughts
In practice, both methods do the same thing: reload the page. But the subtle difference in browser history handling might matter in certain situations.
I thought this would be more complicated—but it turned out both versions worked just fine. In the end, whether or not to use JavaScript is just a matter of taste (or requirements).
Either way, your users now have a shiny new refresh button to click
