JavaScript History Object

The History object is read only property which includes browser’s history and information about the URL’s visited by the user. It provides methods and properties for manipulating browser session history. This object can be written without the window prefix. The History object doesn’t allow the non-privileged code in the history but allows navigating the session history. It doesn’t expose the actual URL’s in the browser history.

Javascript History Object Syntax

var myobj=window.history;

Javascript History Object Properties

The following are the properties of History object:

  • length: It specifies the number of elements in the history list.
  • current: It specifies current page in the history object.
  • next: It specifies next page url.
  • previous: It specifies previous page url.

Javascript History Object Methods

The following are the methods of History object:

  • back: It is used to go back to previous URL from the history list.
  • forward: It is used to go to next URL from the history list.
  • go: It takes one argument may be either integer argument or string argument and loads URL from the history list.

Window back() method

The back() method represents previous webpage from the history list. It can be written as follows :

history.back()

Example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	function backFunc() {
		window.history.back();
	}
</script>
</head>

<body>
	<input type="button" value="Back" onclick="backFunc()">
</body>
</html>
  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • history.back(); line go to previous webpage from the history list.
  • <input type=”button” value=”Back” onclick=”backFunc()”> tag creates button, when user clicks on the button, backFunc() function will be invoked.

Javascript History Demo

  • Save the file as JShistory_example.html in your system.
  • Open some page in your browser say for example “www.javabeat.net”.
  • Now on the same browser window open the above JShistory_example.html. You will see that on the click of “back” button the previous page opens.

Window forward() method

This method is used to go to the next web page from the history list. It can be written as follows:

history.forward()

Example:

<!DOCTYPE html>
<head>
<script type="text/javascript">
	function fwdFunc() {
		window.history.forward();
	}
</script>
</head>

<body>
	<input type="button" value="Forward" onclick="fwdFunc()">
</body>
</html>
  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • history.forward(); line go to next web page from the history list.
  • <input type=”button” value=”Forward” onclick=”fwdFunc()”> tag creates button, when user clicks on the button, fwdFunc() function will be invoked.

Javascript History Example Demo

  • Save the file as JShistoryforward_example.html in your system.
  • Open JShistoryforward_example.html in your browser.
  • Now on the same browser window open some page say for example “www.javabeat.net”.
  • Now click back arrow on the browser and you will be taken to the JShistoryforward_example.html. Now click on thr forward button, and the link is forwarded to the www.javabeat.net.

Comments

comments

Speak Your Mind

*