Please take a second out to visit our sponsors. Thanks.

Home / JavaScript Tutorials / Creating window remote controls/ Part 2
 

 

WA Help Forum
Having trouble with anything? Visit our help forum to get the answers you need.

Jump to...
-Tutorial Index
-Free JavaScripts
-Free Java Applets
-Web Tutorials
-Frontpage Tutorials

Low cost, high quality web hosting!
Click here for low cost, high quality web hosting!

Link to us!
We always welcome and appreciate links back to Website Abstraction. Click here for details.

 

..
Red_CurlyC035.gif (285 bytes) Creating window remotes using the window.opener property of NS 3.x

The window.opener property of NS 3.x is created whenever a secondary window is opened using the window.open method.  Using this opener property, we can access the main window (the default browser window) from the newly opened window. You may have learned from the tutorial Windows and JavaScript how to access a secondary window from the main window, but not the other way around. Lets briefly see what I mean:

To open a new window:

<script>
var anotherwindow=window.open("whatever.htm")
</script>

To access "anotherwindow" from main, we would simply use the keyword "anotherwindow":

<script>
var anotherwindow=window.open("whatever.htm")
change the background color of the second window from main
anotherwindow.bgColor="black"
</script>

In the above example, the access between windows using JavaScript is a one way street; we can access properties/methods of the secondary window from the main , but cannot access the properties/methods of the main window from the secondary:

remoted.gif (14385 bytes)

Here's where the window.opener property comes in. By using this property in the secondary window, we have access to the main window as well. Lets implement an example where the secondary window accesses and changes the background color of the main. The below's a secondary window that contains buttons that changes the background color of the main window when clicked on:

<!--code for secondary window-->
<html>
<head>
<title>Secondary window</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<form>
<input type="button" onClick="window.opener.document.bgColor='yellow'" value="yellow">
<input type="button" onClick="window.opener.document.bgColor='lightgreen'" value="lightgreen">
<input type="button" onClick="window.opener.document.bgColor='white'" value="white">
</form>
</center>
</body>
</html>

By using the window.opener property, the secondary window now has access to something it never had- access to its boss, the main window. If it helps, think of the window.opener property as  JavaScript's way of saying "main window", or "the window that opened the other window".

We are now officially ready to create "remote controls"! The code inside the remote control window should come as trivial to most of you; simply create a function that loads the specified url to the window.opener property:

<!--code for secondary remote control window-->
<html>
<head>
<title>Secondary window</title>
<script>
function remote(url){
window.opener.location=url
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form>
<input type="button" onClick="remote('document1.htm')" value="lesson1">
<input type="button" onClick="remote('document2.htm')" value="lesson2">
<input type="button" onClick="remote('document3.htm')" value="lesson3">
</body>
</html>

Wow, a JavaScript remote is sure easier to construct than a real remote!

Go on to Part 3 Small4.gif (1046 bytes)

.
http://www.wsabstract.com
CopyRight © 1997, 1998 Website Abstraction. NO PART may be reproduced without author's permission.