By: aathishankaran in HTML5 Tutorials on 2007年03月29日 [フレーム]
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.
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
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 #)
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.
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.
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
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
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:
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 )
user-scalable=no in the meta tag in html
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Video - Handling video in HTML5
Latest Articles (in HTML5)
© 2023 Java-samples.com
Tutorial Archive: Data Science React Native Android AJAX ASP.net C C++ C# Cocoa Cloud Computing EJB Errors Java Certification Interview iPhone Javascript JSF JSP Java Beans J2ME JDBC Linux Mac OS X MySQL Perl PHP Python Ruby SAP VB.net EJB Struts Trends WebServices XML Office 365 Hibernate
Latest Tutorials on: Data Science React Native Android AJAX ASP.net C Cocoa C++ C# EJB Errors Java Certification Interview iPhone Javascript JSF JSP Java Beans J2ME JDBC Linux Mac OS X MySQL Perl PHP Python Ruby SAP VB.net EJB Struts Cloud Computing WebServices XML Office 365 Hibernate