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>

More Posts related to JavaScript,

More Posts: