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
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
|
Most Viewed Articles (in HTML5 ) |
Latest Articles (in HTML5) |
Comments