JavaScript How To Go Back To Previous Page Without Refresh
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript how to go back to previous page without refresh, in JavaScript, the page is reloaded using the document.location.reload() method or the window.location.reload() method.
You can use location.reload() to accomplish the same thing as pressing the browser's reload button.
The browser's cache is used by default when this method is used to reload the page.
By clicking the JavaScript event, users can make their browsers go back to the previous page, both methods are explained below:
Loading a page from the session history with history.go():
By changing the delta parameter, forward or backward motion can be achieved.
By setting delta to a positive value, the page will advance in history. In the case of a negative delta value, the page would revert to the previous one.
Using "-1" as the delta value will take you one page back in history. By specifying the onclick event, a page in history can be returned one page.
A URL (page) from the history list can be accessed by calling history.back().
The history.back() method only works if a previous page exists.
The idea is that, when clicking on an anchor within a wrapper element (#wrapper), the content of the linked page is shown.
In place of a full-page refresh/transition, a custom loader element (#loader) is shown for a short period while the linked page's content is being loaded.
The title and body of the page is replaced with those of the loaded linked page.
This way is sub-optimal. For example, one major drawback is that the back functionality does not work; the previous page does not load when navigating via the browser's back button.
You can use either method for adding or replacing URLs in the browser's history. A different website cannot be navigated to through the History API, since it only supports same-origin URLs.
It is assumed that False will be the default value in this case. The method object.reload() does the same thing as object.reload(false), as it reloads the page using the browser's cached data.
By calling the method when the user performs an event rather than automatically refreshing the page when the user clicks a button, the web page will be refreshed when the user clicks a button.
The page will be refreshed after clicking the Reload Page button after the location.reload() method is called.
Step By Step Guide On JavaScript How To Go Back To Previous Page Without Refresh :-
Page1.html
<!DOCTYPE html> <html> <head> <title> TalkersCode previous page using JavaScript? </title> </head> <body> <h1 style="color: green"> TalkersCode redirect page without refresh </h1> <b> Onclick javascript to make the browser go back to previous page? </b> <h2>Page 1</h2> <p> TalkersCode Click on the link </p> <a href="page2.html">Go to Page 2</a> </body> </html>
Page2.html
<!DOCTYPE html> <html> <head> <title> TalkersCode How to make a browser? </title> </head> <body> <h1 style="color: green"> TalkersCode redirect page without refresh </h1> <b> Onclick Javascript </b> <h2>Page 2</h2> <p> TalkersCode Click on the button </p> <button onclick="history.go(-1)"> Click here to go back </button> </body> </html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- Using the <head> tag, we will explain the project's heading. <title> are open and </title>.
- An external style sheet that is referenced with a full URL or with a path relative to the current web page is referred to as a step-by-step style sheet.
- Then we use <b> tag and <p> tag for bold and paragraph.
- Then we use onclick directive for detecting click events and an ng-class directive for adding up and down arrows. ng-click and ng-class directives contain a function that takes the key name as a parameter.
- Then we use hyperlink for redirecting page without refresh.
- After that </body></html> and code should be executed after closing all tags.
Conclusion :-
The window. the location has a href property. This returns the URL of the current website.
In this example, this property is used for reloading and refreshing the current page.
This property can also be used to target another page and refresh it.
I hope this article on JavaScript how to go back to previous page without refresh helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
