Java script frame history

Lecture 20
Referring to Unnamed
Frames Numerically
This is the last topic with using Frames in JavaScript. Like we did with Forms, same is
the case with Frames. If we don’t give any name to forms, then in JavaScript first form is
referred as forms [0], second form is referred as forms [1]. This is because; JavaScript
maintains an array of all the forms.
Similarly, if frames are unnamed, i.e. we don’t give any name to frames, then in
JavaScript first frame is referred as frames [0], second frame is referred as frames [1],
and so on.

Let us take an example.
Below is the code for frameset.html
<HTML>
<frameset cols="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</HTML>

Below is the code for frame1.hmtl
<HTML>
<HEAD>
<TITLE> Frame 1</TITLE>
<script language="JavaScript">
function fn1()
{
window.alert("This is function in frame 1");
}
</script>
</HEAD>
<BODY>
This is frame 1 <br>
<a href="#" onClick="parent.frames[1].fn1()"> Call Function in Frame2</a>
</BODY>
</HTML>

Below is the code for frame2.html
<HTML>
<HEAD>
<TITLE> Frame 2</TITLE>
function fn1()
{

window.alert("This is function in frame 2");
}
</script>
</HEAD>
<BODY>
This is frame 2 <br>
<a href="#" onClick="parent.frames[0].fn1()"> Call Function in Frame1</a>
</BODY>
</HTML>

History Object
History Object Properties

• Length: Returns the number of items in the current history list

History Object Methods

• Back(): Moves back n items in the history list
• Forward(): Moves forward n items in the history list
• Go(): Moves to item n in the history list

There are currently no History object events. This means you cannot associate any event
with the History object.

History object contains the list of URL’s that your browser has visited. In other words,
History object is an array of all URL’s visited so far with the current open browser.

Since History object is an array, so it must have a length property, which will give you
the number of URL visited so far.

Generally, if you want to go back to the previous page, you click the back button in the
menu bar of your browser. And, in case you want to go back to the next page, you click
the forward button
Notice: When you open a browser, back and forward button both are disabled.

If you want, you can provide that buttons on your web page, so that user can move back
and forward using your buttons rather than using browser buttons.

There are three ways to implement back and forward buttons

1. Back and Forward Using History
2. Back and Forward Buttons (Simple)
3. Back and Forward Buttons Without History

Back and Forward Using History
Now, we will understand How to code back and forward button using history.

Below is the code
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script LANGUAGE="JavaScript">
function back()
{
history.go(-1);
}

function forward()
{
history.go(+1);
}
</script>
</HEAD>

<BODY>
<FORM>
<INPUT TYPE="button" VALUE="<< Back" onClick="back()">
<INPUT TYPE="button" VALUE="Forward >>" onClick="forward()">
</FORM>
</BODY>
</HTML>

Back and Forward Button (Simplest Way)

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script LANGUAGE="JavaScript">
function back()
{
Location.href=”a.html”;
}

function forward()
{
Location.href=”b.html”

}
</script>
</HEAD>

<BODY>
<INPUT TYPE="button" VALUE="<< Back" onClick="back()">
<INPUT TYPE="button" VALUE="Forward >>" onClick="forward()">
</BODY>
</HTML>

Back and Forward buttons without using history object


var MyLocation=window.location;

var MyPage=new Array;

{

MyPage[0]="index.html";

MyPage[1]="alerts.htm";

MyPage[2]="alertsText.htm";

MyPage[3]="alertsImages.htm";

MyPage[4]="jumpfunction.htm";

MyPage[5]="alertConfirm.htm";

MyPage[6]="alertConfirm2Locs.htm";

MyPage[7]="alertOnLoad.htm";

MyPage[8]="alertHelloEx.htm";

MyPage[9]="alertPrompts.htm";

MyPage[10]="documentWrite.htm";

MyPage[11]="documentWrite2.htm";

MyPage[12]="WindowNew.htm";

MyPage[13]="WindowNew2.htm";

MyPage[14]="WindowNewHyperlinks.htm";

MyPage[15]="menu1.htm";

MyPage[16]="menuSelectOnChange.htm";

MyPage[17]="ArrayText.htm";

MyPage[18]="jsFrames.htm";

MyPage[19]="frameHyperlinks.htm";

MyPage[20]="BackForward.htm"; }

function GoBack() {

if (ThisPageNumber <=0) {

alert("You are at the beginning of this series");

}

else{ ThisPageNumber=ThisPageNumber-1;

window.location=MyPage[ThisPageNumber];

}}

function GoForward(){

ThisPageNumber=ThisPageNumber+1;

if (ThisPageNumber >=MyPage.length) {

answer=confirm("You are at the end of the present series. "+

"Press ok to go to the beginning. Cancel to stay here");

if (answer!=0) {

ThisPageNumber=0; window.location=MyPage[ThisPageNumber]; }
ThisPageNumber=ThisPageNumber-1;

}

else {

window.location=MyPage[ThisPageNumber];

}

}

</script>

Java script frame history

More Related Content

What's hot (20)

Similar to Java script frame history (20)

More from H K (20)

Recently uploaded (20)

Java script frame history