{"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":"2021-01-03T17:09:31","modified_gmt":"2021-01-03T11:39:31","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 Refresh Page Buttons, Links"},"content":{"rendered":"<p>Do you want to add a refresh page button or reload page link to the HTML of the web page? This might be useful for purposes when you are live blogging, posting newsy contents in real time or engaging in a quick discussion on quick blogging themes. This would enable users to just click the button and reload rather than repeatedly hitting the browser refresh icons.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-59099\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/refresh-page-1024x576.jpg\" alt=\"refresh page\" 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<h2>1. Javascript Page Refresh Link<\/h2>\n<p>The easiest way would seem to link to the permalink of the page, and clicking it will simply revisit the page again. But then the next methods are independent of links added to the code.<\/p>\n<p>The simplest way is to use a javascript link and it looks like this. This will create a link and clicking it will simply reload the page of the current url as visible in the browser url field.<\/p>\n<p><code>&lt;a href=\"javascript:location.reload();\" &gt;RELOAD PAGE&lt;\/a&gt;<\/code><\/p>\n<h2>2. Javascript Refresh Page Button<\/h2>\n<p>If you prefer to display this code as button, use the input tags and a button will appear instead of a link.<\/p>\n<p><code>&lt;input type=\"button\" value=\"Reload page\" onclick=\"location.reload();\"&gt;<\/code><code><span style=\"line-height: 1.6;\">\u00a0<\/span><\/code><\/p>\n<p>Its easy to add classes to style the links and buttons as per your site design. Just add CSS style to the class &#8216;yourstyle&#8217; and get an amazing number of options. If you are using <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/\">CSS frameworks<\/a> like Bootstrap, there are easy to use btn classes for styling.<\/p>\n<p><code>&lt;a class=\"yourstyle\" href=\"javascript:location.reload();\" &gt;RELOAD PAGE&lt;\/a&gt;<\/code><\/p>\n<h2>3. Refresh and Reload Page Button<\/h2>\n<p>If you do not want to add the scripts in the html body, then another way is to put the script in the HEAD part of the HTML code like this<\/p>\n<pre><code>&lt;script&gt;\nfunction reloadPage()\n{\nlocation.reload();\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p><span style=\"line-height: 1.5;\">The use of input tags to create the buttons as needed. Click to refresh the page.<\/span><\/p>\n<p><code>&lt;input type=\"button\" value=\"Reload page\" onclick=\"reloadPage()\"&gt;<\/code><\/p>\n<h2><span style=\"line-height: 1;\">4 Auto Refresh Pages<\/span><\/h2>\n<p>Use this with care as such pages will continue to auto refresh is left alone in a browser window and can affect page traffic statistics. This might also <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/worst-seo-mistakes\/\">not be good for SEO<\/a> and search engine data as it might be seen as an attempt to artificially <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/03\/how-to-track-more-pageviews-with-google-analytics\/\">increase pageviews<\/a>.<\/p>\n<p>You can force reloading of pages after selected time intervals using META refresh tags. In the example below, the page will refresh every 30 seconds.<\/p>\n<p><code>&lt;META HTTP-EQUIV=\"refresh\" CONTENT=\"30\"&gt;<\/code><\/p>\n<p>If the url is fixed, the you can add the urls link also to the page<\/p>\n<p><code>&lt;META HTTP-EQUIV=\"refresh\" CONTENT=\"30\" URL=\"http:\/\/domain.com\/\"&gt;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to add a refresh page button or reload page link to the HTML of the web page?&#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":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_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":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40392\/revisions"}],"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}]}}