JavaScript 1: history object

The top most object in the Browser Object Model (BOM) is the “window”. I have three files

  1. history.html:  Start
  2. file1.html: Middle
  3. file2.html: Last

In the Start, you can click the “go to middle” to visit the page file1.html. In this page you have two buttons, when you click “Back” it should take you back to the history.html, otherwise you can go to the last page click by “go to end”. In the “End” page you can go to the page entering -2 for “Start” or –1 for “Middle”.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Start</h1>
<a href="file1.html">go to middle</a>
</body>
</html>

As shown in the above code, there is just one link to go to the middle page.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> In the Middle, one to go</h1>
<a href="file2.html">go to end</a>
<input type="button" value="back" onclick="return window.history.back()">
<input type="button" value="forward" onclick="return window.history.forward()">
</body>
</html>

As shown in the above code, you have two option to going back link to go to the “End” page. In the first round you cannot use the “forward” button because still you haven’t visit the next page.

<!DOCTYPE html>
<html>
<head>
<title></title>
<title></title>
<script type="text/javascript" language="JavaScript">
function goPage(){
var pageToGo = parseInt(pg.value);
window.history.go(pageToGo)
}
</script>
</head>
<body>
<h1>End</h1>
<input type="button" value="back" onclick="return window.history.back()">
<br/>
<label>enter the page to go</label><input type="text" id="pg">
<input type="button" value="Go" onclick="goPage()">
</body>
</html>

As shown in the above listing, you can go back or the any page recorded in the history, for example first page entering the value –2. Back always – and forward always +.

Comments

Popular posts from this blog

How To: GitHub projects in Spring Tool Suite

Spring 3 Part 7: Spring with Databases

Parse the namespace based XML using Python