Categories:

Creating window remotes using a user defined property

Many people think that the only way for a pop up window to reference the main window that opened it is via the "window.opener" property. This turns out to be untrue. An alternate method is to create a custom property that "simulates" the window.opener property. There's no real advantage to using this technique over "window.opener" except to illustrate different ways of accomplishing the same thing in JavaScript.

Lets walk through this process one step at a time. To begin with, we will first implement our custom property in the main window:

<script type="text/javascript">
win2=window.open("remote.htm","","width=60,height=300")
win2.creator=self // attach the custom property "creator" to win2, and have it contain the current window (main window)
</script>

The core of the above is:

creator.gif (4861 bytes)

"creator" is a custom property added to "win2" that acts as the opener property. We could have called "creator" some other name, if we wanted to. "self", however, is a pre-built property, and has to be called as such. This property references the current window, and by assigning the current window (the main window, in this case)  to the creator property, we have our own window.opener property!

All we have to do now is use this custom property in the document inside the remote control window to access the main window:

<head>
<script type="text/javascript">
function remote2(url){
	creator.location=url
}
</script>
</head>

<body>

<div align="center" style="background-color: lightyellow;"><h3>Remote Control</h3></div>

<ul>
<li><a href="javascript:remote2('http://www.javascriptkit.com/javatutors/')">JavaScript Tutorials</a></li>
<li><a href="javascript:remote2('http://www.javascriptkit.com/jsref/')">JavaScript Reference</a></li>
<li><a href="javascript:remote2('http://www.javascriptkit.com/cutpastejava.shtml/')">Free JavaScripts</a></li>
<li><a href="javascript:remote2('http://www.javascriptkit.com/dhtmltutors/')">DHTML tutorials</a></li>
<li><a href="javascript:remote2('http://www.codingforums.com')">Coding Forums</a></li>
</ul>

</body>

Ok, so we've went over the two techniques for creating window remotes.