DOM Window Identifying
DOM Windows and Related Objects – Part 6
Forward: In this part of the series, we look at the different ways of identifying a window.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The window Object
The window Object is a DOM object that represents the browser window that is currently displayed. The window object has properties and methods. The syntax to access a window object property is,
window.property
The syntax to access a window object method is,
window.method()
We have seen many examples of the use of the window object in this series.
The self Property
The self property returns a reference to the current window. You can use it alone, you can precede it with the window object and a dot; you can assigned it to a different variable. Read and try the following code, where it is used in the different ways to obtain the same result (you will have to dismiss a previous alert box first before you see the next one):
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(self.innerHeight);
alert(window.innerHeight);
winRef = window.self
alert(winRef.innerHeight);
</script>
</body>
</html>
The top property returns a reference to the topmost (in front) browser window. You can have more than one browser window opened at the computer screen. When they are opened they overlap, and one is on top of the others. Do not confuse between browser window and html document. An html document is in a browser window (you can have more than one document, each in a frame, all in a browser window).
Now open a browser window on your computer screen. Open another browser window having the following document, to see the effect of the window object top property:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
if (window.top == window.self)
{
alert("At the moment I am on top.");
}
</script>
</body>
</html>
The name Property
A web page can have a name, just as you give a name to a person. The window object name property sets or gets (returns) the name of a window. The name assigned is typed in quotes. Read an try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.name = "Peterson";
alert(window.name);
</script>
</body>
</html>
Note: with the frameset web page, the script that gives the name of the window is placed in the head element.
The window object has a method called the open() method. This method will open a new browser window at the client computer. Such a browser window that is opened by DOM/ECMAScript from another browser window is called a pop-up window. When the script is executed, your browser window having the script may prevent such pop-up window from opening but would indicate to you how to allow its opening. Just follow the instruction of the browser to allow the pop-up window to open. Read and try the following code, which opens a blank browser window:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.open();
</script>
</body>
</html>
We shall see more about the open() method later. However, we shall use it here to describe the window object opener property.
The opener Property
One window (browser) can open another window (browser) using the open method. The newly opened window can use the window object opener property to obtain a reference to the window that opened it. The syntax for the opener property is,
window.opener
Let us look at an example. Type the following two html documents, giving the file name, “page1.htm” to the second document. Save the two files in the same directory.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.name = "Peterson";
window.open("page1.htm");
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>New Window</title>
</head>
<body>
<p>paragraph paragraph paragraph</p>
<script type="text/ECMAScript">
alert(window.opener.name);
</script>
</body>
</html>
The second document will open in a pop-up window, displaying the name of the previous window that opened it. Read the above two code samples, if you have not already done so. Now open the first document and it will open the second document in a new browser window. The new browser window will display an alert box indicating the name of the previous browser window.
Note: An alert box and a pop-up window are not the same thing. A pop-up window is a new browser window opened from another (previous) window, using the open() method. An alert box is created by the alert() method.
The parent property has a similar purpose as the opener property but it is used in a browser window that has a frameset and it is the frames (in the frameset) that use it and not pop-up (opened browser) windows. Let us demonstrate this. Type the following code and save it as a web page in a directory:
<!DOCTYPE HTML>
<html>
<head>
<title>Frame Example</title>
<script type="text/ECMAScript">
window.name = "James";
</script>
</head>
<frameset rows="15%, 70%, 15%">
<frame src="header.htm">
<frameset cols="20%, 60%, 20%">
<frame src="left.htm">
<frame src="center.htm">
<frame src="right.htm">
</frameset>
<frame src="footer.htm">
</frameset>
</html>
This is a frameset page. Note that its script is in the head element. Now, save the following code with the name, “header.htm” in the same directory.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<p>paragraph paragraph paragraph</p>
<script type="text/ECMAScript">
alert(window.parent.name);
</script>
</body>
</html>
This code refers to the frameset page as the parent page, and would display the name of the parent page.
Now, double click the frameset file. The frame for the “header.htm” file would display the name of the frameset page file, in an alert box.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT