Loading previous page using html button using JavaScript


Web browsers have a back button that lets you go back to the previous page you just visited. If you want this functionality to be performed using a button in HTML you need to make use of history.back() function available in window object.

To demonstrate, let's create a HTML page with a button and call getPrevPage() function onClick of it. Create a function in head section script block.

<!DOCTYPE html>
<html>
<head>
<script>
function getPrevPage() {

     //gets to the previous loaded page
     window.history.back();

}
</script>
</head>

<body>

<input type="button" value="Back" onclick="getPrevPage()">

</body>
</html>

Similarly we have window.history.forward() that works just as the forward button on the web browsers. Lets create an example with both back and forward button implementation.

<!DOCTYPE html>
<html>
<head>
<title>Previous and Next Page button implementation using Javascript</title>
<script>
function getPrevPage() {

     //gets to the previous loaded page
     window.history.back();

}

function getNextPage() {

     //gets to the next loaded page
     window.history.forward();

}
</script>
</head>

<body>

<input type="button" value="Load Prev Page" onclick="getPrevPage()">
<input type="button" value="Load Next Page" onclick="getNextPage()">
</body>
</html>
Advertisements
Try Out Code2care Dev Tools:

Advertisements



#Android #Java #Linux #Microsoft #Google #Python #MacOS #Notepad++ #Microsoft Teams #CSS #PHP #SharePoint #Html #Linux #C-Program #Bootstrap #jQuery #Sublime #Android-Studio #Facebook #Eclipse #WhatsApp #News #MySQL #Json #HowTos #JavaScript #FTP #S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency