DOM History Object
DOM Windows and Related Objects – Part 3
Forward: In this part of the series, we look at the DOM History Object.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The history Object
The history object is an object that contains a list of the URL’s for a browser, visited by a user of a particular computer. If different people use the same browser in a particular computer, in that case, all the users would be considered as one user.
Accessing the history Object Property
The syntax to access a history object property is:
history.property
Accessing the history Object Methods
The syntax to access a history object method is:
history.method()
You need to have opened several pages in the same tab window before you can try the code samples below. You will have to type the URL of each of the pages below in the address bar of the browser, to try the code.
The length Property
The length property returns the number of URLs in the history list. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(history.length);
</script>
</body>
</html>
The back() method of the history object, loads the page of the previous URL in the history list (relative to the currently displayed page). Read and try the following code (click the button):
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function goback()
{
history.back();
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="goback()">Click</button>
<script type="text/ECMAScript">
alert(history.length);
</script>
</body>
</html>
The go() Method
The go() method loads the page of a specific URL from the history list. It takes an argument, which is either an integer or a URL in the list. A positive integer takes you the number of pages forward; a negative integer takes you the number of pages backward. If the argument is a URL, it must be a URL from the history list. The forward or backward movement is relative to the currently displayed page. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function go()
{
history.go(1);
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="go()">Click</button>
<script type="text/ECMAScript">
alert(history.length);
</script>
</body>
</html>
The forward() method loads the page of the next URL in the history list, relative to the currently displayed page. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function forw()
{
history.forward();
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="forw()">Click</button>
<script type="text/ECMAScript">
alert(history.length);
</script>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT