Tutorialspoint.dev

JavaScript | History object

The window.history object contains the browsers history. First of all, window part can be removed from window.history just using history object alone works fine. The JS history object contains an array of URLs visited by the user. By using history object, you can load previous, forward or any particular page using various methods.
Property of JavaScript history object :

  • length: It returns the length of the history URLs visited by user in that session.

Methods of JavaScript history object :

  • forward(): It loads the next page. Provides a same effect as clicking back in the browser.
  • back(): It loads the previous page. Provides a same effect as clicking forward in the browser.
  • go(): It loads the given page number in browser. history.go(distance) function provides a same effect as pressing the back or forward button in your browser and specifying the page exactly which you want to load.

JavaScript code to show the working of history.back() function:
Code #1:

<html>
<head>
<title>GeeksforGeeks back() example</title>
</head>
<body>
<b>Press the back button</b>
<input type="button" value="Back" onclick="previousPage()">
<script>
function previousPage() {
    window.history.back();
}
</script>
</body>
</html

Output:

Press the back button Back

Click here to see the effect of the code
Note : This example will not work if the previous page does not exist in the history list.If you click the above link then new page opens and when you press back button on that page it will redirects to that page which you opened previously.



JavaScript code to show the working of history.forward() function:
Code #2 :

<html>
<head>
<title>GeeksforGeeks forward() example</title>
</head>
<body>
<b>Press the forward button</b>
<input type="button" value="Forward" onclick="NextPage()">
<script>
function NextPage() {
    window.history.forward()
}
</script>
</body>
</html>

Press the forward button Forward

Note : This example will not work if the next page does not exist in the history list. This code can be used when you want to use the forward button in your webpage. It works exactly same as forwarding button of your browser. If the next page doesn’t exist it will not work.

JavaScript code to show the working of history.go() function:
go(4) has the same effect as pressing your forward button four times.A negative value will move you backwards through your history in a browser.go(-4) has the same effect as pressing your back button four times.
Code #3:

<html>
<head>
<title>GeeksforGeeks go() example</title>
</head>
<body>
<input type="button" value="go" onclick="NextPage()">
<script>
function NextPage() {
    window.history.go(4);
}
</script>
</body>
</html

Note : This example will not work if the next four pages do not exist in the history list.



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter