Home arrow JavaScript arrow Page 5 - Controlling Browser Properties with JavaScript

Navigating the Family Tree - JavaScript

Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.

TABLE OF CONTENTS:
  1. Controlling Browser Properties with JavaScript
  2. Starting at the Top
  3. Moving Windows
  4. Bar Tales
  5. Navigating the Family Tree
  6. Location is Everything
  7. History Lesson
  8. Down to the Document
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 120
February 02, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

It's interesting to note, also, that the manner in which you refer to windows changes depending on where you are when you do the referring. In order to close the current window, for example, you can always use the following:


<script language="JavaScript">
// close this window
window.close();
</script>

However, you can also affect other windows, simply by replacing the generic name "window" with the actual name of the window. For example, let's suppose you want to close a child window (previously assigned the name "baby") from a parent window.


<script language="JavaScript">
// close the child window named 'baby'
baby.close();
</script>

Thus, JavaScript always understands the generic object name "window" to refer to the current window. To refer to any other window, you should use the corresponding window name.

Let's look at a simple example to see how this works. Here, the primary window consists of a menu containing links, each of which open up in a child window named "display". The child window can be closed either from the parent window, by clicking on the "Close Display Window" link, or from the child window itself, by clicking the "Close Me" link. Here's the code for the menu:


<html>
<head>
</head>
 
<
body>
 
<
ul>
<li><a href="javascript:var display=window.open
('http://www.melonfire.com/community/columns/trog/',
'display');"
>Melonfire</a>
 
<
li><a href="javascript:var display 
= window.open
('http://www.xmlphp.com/', 'display');"
>
XML 
and PHP</a>
 
<
li><a href="javascript:var display 
= window.open
('http://www.mysql-tcr.com/', 'display');"
>
MySQL
The Complete Reference</a>
</ul>
<a href="javascript:display.close();"><b>Close Display Window</b></a>
 
</
body>
</html>

Notice that I have prefixed the call to close() with the child window name.

Within the pages loaded, there exists a "Close Me" link as well, which can be used to close the child window directly. Here's what one of the pages loaded into the child window might look like:


<html>
<head>
</head>
<
body>
<!-- 
page content for link here -->
<!-- 
close window link -->
<a href="javascript:window.close();">Close Me!</a>
</
body>
</html>

In this case, since I'm closing the current window, I can use window.close() directly without worrying about the window name.

Thus far, I've shown you how to control the child window from the parent. It's also possible to work the other way around, controlling the parent window from the child. Every Window object exposes an "opener" property, which contains a reference to the window that created it. Therefore, even if you don't know the name of the parent window, it's still possible to access and manipulate it via this "opener" property.

Let's take a look at a simple example, resizing the parent window from the child:


<html>
<head>
</
head>
<
body>
<!-- 
page content for link here -->
<!-- 
resize parent window -->
<a href="javascript:opener.resizeTo(400,400);">Resize My Parent</a>
</
body>
</html>



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: