Programming Tutorials

Frame, Location and History objects in HTML

By: aathishankaran in HTML5 Tutorials on 2007-03-29  

Frame object

The frame, object is essentially the same element as a window object, and you can deal with it in a similar manner. If you are working with a single window, the window object is the top-level object. If you are working within a frameset, the top-level window is considered the parent window, whereas its child windows are considered frame objects.

Location Object

The location object encapsulates the URL of the current page. It's enabling you to

Set the location object to move to a new URL.
Extract specific elements of the URL and work with them. Without the location object, you would be forced to perform string manipulations on a URL string to get at the information you need.

The basic structure of a URL is as follows:

protocol//hostname: port pathname search hash

A typical URL could look something like the following:

https://www.java-samples.com/showtutorial.php?tutorialid=180
Attribute Description

href

Complete URL

protocol

Initial element of a URL (before and including colon)

hostname

Host and domain name or IP address

host

Hostname: port element of a URL

port

Communications port of the server

pathname

Path element of a URL

search

Query definition portion of a URL (begins with a 7)

hash

Anchor name of a URL (begins with an #)

History Object

If you have surfed the Web at all, you are probably very familiar with a browser's history list. Just as the history list allows a user to traverse where she has been, JavaScript's history object enables you as a JavaScript developer to maneuver through Web pages that have been visited.

Determining the Size of the list

You can use the length () property of the history object to determine the number of entries in the list. For example, suppose you want to track the number of history list entries in the right frame of a multiframe window. The left frame contains the following code:

<HTML>

<HEAD>
  <SCRIPT>
    function moveon() {
      var urlAddress = " ";
      urlAddress = document.forms[0].Edit1.value;
      parent.frames[1].location = urlAddress;
      document.forms[0].Edit2.value
        = parent.frames[1].history.length;
    }
  </SCRIPT>
</HEAD>

<BODY>
  <FORM>
    <INPUT type="text" name="Edit1">
    <INPUT type="button" value="move" onClick="moveon()">
    <INPUT type="text" name="Edit2">
  </FORM>
</BODY>

</HTML>

The user can use the Edit1 text object to enter a URL to move to. As the user clicks the Move button to move to the URL, the Edit2 text object is updated to provide the length of the history list for the right frame.

Navigating the History List

Just knowing the length of the history list is rarely useful, but it can become useful when you want to navigate a list using the history object methods back (), forward(), and go ().

Back Page

The back () method is the functional equivalent of clicking the back (left-arrow) button on the browser's toolbar. For example, the following code moves a window to its previous position:

window.history.back()

Forward Page

As you would expect, the forward () method is the same as clicking the right arrow button on the browser's toolbar. It is used as follows:

window.history.forward()

Specific Page Based on Number

The go () method jumps to a specific place in the history list. Its syntax follows:

[window.]history.go(delta | "location")

The delta parameter is a positive or negative integer that can specify the number of places to jump. For example, the following line moves to the next document in the history list

(the equivalent of using the forward () method):

window.history.go(l)

The following list details the delta value:

delta < 0 Moves backward delta number of entries
delta > 0 Moves forward delta number of entries
delta = 0 Reloads the current document





Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in HTML5 )

Latest Articles (in HTML5)