{"id":40392,"date":"2014-04-03T18:22:04","date_gmt":"2014-04-03T12:52:04","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=40392"},"modified":"2026-10-07T07:16:02","modified_gmt":"2026-10-07T01:46:02","slug":"reload-buttons-refresh-links","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/","title":{"rendered":"How to Add a Refresh Page Button or Reload Link (HTML &#038; JavaScript)"},"content":{"rendered":"<p>Want to add a refresh page button or reload link to your web page? A reload button is handy for live blogs, scores, dashboards, web apps and pages that show changing data, so visitors can update the page with one click instead of hunting for the browser&#8217;s refresh icon, which is hidden on many mobile browsers. Here&#8217;s the HTML and JavaScript code for a refresh page button, a reload link and auto refresh in 2026, with modern best practices.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-59099\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-1024x576.jpg\" alt=\"refresh page button and reload link\" width=\"760\" height=\"428\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-1024x576.jpg 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-300x169.jpg 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-150x84.jpg 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-768x432.jpg 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page.jpg 1280w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Add <code>&lt;button type=\"button\" onclick=\"location.reload()\"&gt;Refresh page&lt;\/button&gt;<\/code> to your HTML. Clicking it reloads the current page using JavaScript&#8217;s <code>location.reload()<\/code> method.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aea00a5c4d2e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aea00a5c4d2e\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#1_Refresh_page_button_HTML_and_JavaScript\" >1. Refresh page button (HTML and JavaScript)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#2_Reload_page_link\" >2. Reload page link<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#3_Refresh_button_without_inline_JavaScript\" >3. Refresh button without inline JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#4_Auto_refresh_a_page\" >4. Auto refresh a page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#5_Hard_refresh_bypass_the_cache\" >5. Hard refresh: bypass the cache<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#Adding_a_refresh_button_in_WordPress\" >Adding a refresh button in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#How_do_I_refresh_a_page_in_JavaScript\" >How do I refresh a page in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#Is_meta_refresh_bad_for_SEO\" >Is meta refresh bad for SEO?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/reload-buttons-refresh-links\/#How_do_I_refresh_only_part_of_a_page\" >How do I refresh only part of a page?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Refresh_page_button_HTML_and_JavaScript\"><\/span>1. Refresh page button (HTML and JavaScript)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The simplest and most accessible option is a real <code>&lt;button&gt;<\/code> element:<\/p>\n<pre><code>&lt;button type=\"button\" class=\"reload-btn\" onclick=\"location.reload()\"&gt;\r\n  Refresh page\r\n&lt;\/button&gt;<\/code><\/pre>\n<p>Buttons work with the keyboard and screen readers, and you can style them with CSS. If you use a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/\">CSS framework like Bootstrap<\/a>, just add <code>class=\"btn btn-primary\"<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Reload_page_link\"><\/span>2. Reload page link<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you prefer a text link, point it at the current page and reload with JavaScript:<\/p>\n<pre><code>&lt;a href=\"\" onclick=\"location.reload(); return false;\"&gt;Reload page&lt;\/a&gt;<\/code><\/pre>\n<p>An empty <code>href=\"\"<\/code> links to the current page, so it still works if JavaScript is disabled. Older tutorials use <code>href=\"javascript:location.reload();\"<\/code>, which works but is discouraged today because it breaks with strict Content Security Policies.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Refresh_button_without_inline_JavaScript\"><\/span>3. Refresh button without inline JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For cleaner code, keep the script separate and attach it with an event listener:<\/p>\n<pre><code>&lt;button type=\"button\" id=\"refresh\"&gt;Refresh page&lt;\/button&gt;\r\n\r\n&lt;script&gt;\r\n  document.getElementById(\"refresh\")\r\n    .addEventListener(\"click\", () =&gt; location.reload());\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>This approach works with Content Security Policy, is easy to reuse, and keeps your HTML tidy. See the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Location\/reload\" target=\"_blank\" rel=\"noopener\">MDN location.reload() reference<\/a> for browser details.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Auto_refresh_a_page\"><\/span>4. Auto refresh a page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To refresh a page automatically, add a meta refresh tag to the <code>&lt;head&gt;<\/code>. This example reloads every 60 seconds:<\/p>\n<pre><code>&lt;meta http-equiv=\"refresh\" content=\"60\"&gt;<\/code><\/pre>\n<p>Or with JavaScript:<\/p>\n<pre><code>&lt;script&gt;\r\n  setTimeout(() =&gt; location.reload(), 60000);\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Use auto refresh with care. It can lose what a visitor is reading or typing, inflates pageview statistics, and hurts accessibility, as <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/timing-adjustable.html\" target=\"_blank\" rel=\"noopener\">WCAG guidelines<\/a> recommend letting users control time limits. For live data, it&#8217;s usually better to update just part of the page with <code>fetch()<\/code> instead of reloading everything.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Hard_refresh_bypass_the_cache\"><\/span>5. Hard refresh: bypass the cache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript can&#8217;t force a cache-free reload in most browsers, as the old <code>location.reload(true)<\/code> option only ever worked in Firefox and is now ignored. To get the latest version of a page yourself, use a hard refresh:<\/p>\n<ul>\n<li><strong>Windows and Linux:<\/strong> <strong>Ctrl + F5<\/strong> or <strong>Ctrl + Shift + R<\/strong><\/li>\n<li><strong>Mac:<\/strong> <strong>Cmd + Shift + R<\/strong><\/li>\n<li><strong>Normal refresh:<\/strong> <strong>F5<\/strong> or <strong>Ctrl + R<\/strong> (<strong>Cmd + R<\/strong> on Mac)<\/li>\n<\/ul>\n<p>If visitors keep seeing old content after an update, clear your caching plugin or CDN cache rather than adding refresh buttons.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Adding_a_refresh_button_in_WordPress\"><\/span>Adding a refresh button in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress may strip <code>onclick<\/code> and <code>&lt;script&gt;<\/code> from post content for users without the unfiltered HTML permission. Add the button in a <strong>Custom HTML<\/strong> block as an administrator, or add the event-listener script to your theme&#8217;s footer with a code snippets plugin.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_refresh_a_page_in_JavaScript\"><\/span>How do I refresh a page in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Call <code>location.reload()<\/code>. It reloads the current URL, just like the browser&#8217;s refresh button.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_meta_refresh_bad_for_SEO\"><\/span>Is meta refresh bad for SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A meta refresh that reloads the same page doesn&#8217;t directly hurt rankings, but it can annoy users. Don&#8217;t use a delayed meta refresh to redirect to a different URL; use a 301 redirect instead.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_refresh_only_part_of_a_page\"><\/span>How do I refresh only part of a page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use JavaScript&#8217;s <code>fetch()<\/code> to load new data and update just that section of the page, without a full reload.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to add a refresh page button or reload link to your web page? A reload button is handy for&#8230;<\/p>\n","protected":false},"author":4,"featured_media":59099,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-40392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=40392"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40392\/revisions"}],"predecessor-version":[{"id":63378,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40392\/revisions\/63378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/59099"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=40392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=40392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=40392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}