{"id":590,"date":"2020-03-18T04:54:10","date_gmt":"2020-03-18T04:54:10","guid":{"rendered":"https:\/\/loftocean.com\/doc\/loftloader\/?page_id=590"},"modified":"2020-03-18T06:12:26","modified_gmt":"2020-03-18T06:12:26","slug":"browser-back-forward-button","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/faq\/browser-back-forward-button\/","title":{"rendered":"Browser Back\/Forward Button"},"content":{"rendered":"<p>What happens when clicking on the &#8220;Back&#8221; or &#8220;Forward&#8221; button of a browser?<\/p>\n<p>Results depends on the browser you are using and are related to <strong>&#8220;back\/forward cache&#8221;<\/strong>. <\/p>\n<p><span class=\"highlighted\">A back\/forward cache (BFCache)<\/span> caches whole pages (including the JavaScript heap) when navigating away from a page, so that the full state of the page can be restored when the user navigates back: by clicking on the back\/forward button of the browser, or, on some websites, by clicking on a JavaScript-driven back button (this button uses back() method to create the same feature as clicking the &#8220;Back Button&#8221; in a browser).<\/p>\n<p>Currently only <strong>Safari<\/strong> and <strong>Firefox<\/strong> support &#8220;back\/forward cache&#8221;. You may like to read the following articles for more details: <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Archive\/Misc_top_level\/Working_with_BFCache\" rel=\"noopener noreferrer\" target=\"_blank\">Working with BFCache<\/a>.<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/back-forward-cache\" rel=\"noopener noreferrer\" target=\"_blank\">Exploring back\/forward cache for Chrome<\/a>.<\/li>\n<\/ul>\n<hr>\n<p>LoftLoader has not changed the default function of a browser, so when clicking on the &#8220;Back&#8221; or &#8220;Forward&#8221; button of a browser, the preloader works as it should be:<\/p>\n<p><strong>In browsers that support &#8220;back\/forward cache&#8221;<\/strong>, when clicking on the back\/forwad button, the previous\/next page will not be reloaded, and the preloader will not appear. <\/p>\n<p><strong>When a browser does not support the &#8220;back\/forward cache&#8221;<\/strong>, the browser will reload the page when the user navigates back\/forward, the preloader on the previous\/next page will be displayed again because the previous\/next page is reloaded.<\/p>\n<hr>\n<p><strong>How about the &#8220;Smooth Page Transition&#8221; feature?<\/strong><\/p>\n<p>As we have mentioned in the <a href=\"https:\/\/loftocean.com\/doc\/loftloader\/smooth-page-transition\/\">chapter of &#8220;Smooth Page Transition&#8221;<\/a>, this feature will only be triggered when clicking on an <span class=\"highlighted\">internal < a > link<\/span> on a web page. Clicking on the &#8220;Back&#8221; or &#8220;Forward&#8221; button of the browser will not trigger this feature.<\/p>\n<ul>\n<li>There is no good (safe, clean and suitable for all browsers) solution to detect whether or not the user has pressed the back\/forward button in the browser.<\/li>\n<li>It is generally a bad idea overriding the default behavior of web browser. Client side script does not have the sufficient privilege to do this for security reason.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What happens when clicking on the &#8220;Back&#8221; or &#8220;Forward&#8221; button of a browser? Results depends on the browser you are using and are related to &#8220;back\/forward cache&#8221;. A back\/forward cache (BFCache) caches whole pages (including the JavaScript heap) when navigating away from a page, so that the full state of the page can be restored [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":588,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-590","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":6,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/590\/revisions"}],"predecessor-version":[{"id":608,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/590\/revisions\/608"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/588"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}