Working with Windows: Referencing the Opener

Working with Windows

Referencing the Opener

If you want to associate a link with a specific window, you can use the TARGET attribute of the <A> tag. A browser window doesn't have a name unless you assign it one. When you open a new window via a link with a TARGET attribute, you are assigning it an explicit name:

<A HREF="https://www.intel.com/" TARGET="review">Intel</A>

The preceding link opens a new window named review. The following link generates the same result via JavaScript:

<A HREF="https://www.intel.com/"
   onClick="window.open('https://www.intel.com/', 'review'); return false">Intel</A>

As you can see, assigning a name to a new window is very simple. But what about naming an existing window, or a user-generated window?

The name property of the window object lets you set the name of any window via JavaScript. If you want to launch a new window that will need to associate links and forms with the parent (opener) window, be sure to assign the opener a name:

window.name = "main";
var map = window.open("newpage.html", "map");

If you include the following link in newpage.html, it loads our front page in the parent window:

<A HREF="https://www.docjs.com/" TARGET="main">Doc JavaScript</A>

The opener Property

The opener property sets or retrieves a reference to the window that created the current window. When a source document opens a destination window by calling the open() method, the opener property (of the destination window's window object) specifies the window of the source document. This property persists across document unload in the opened window, so it can be accessed even if the URL in the new window is changed.

The opener property is a reference of the parent window's window object. You can take advantage of this property to perform any action on the opener window via a script in the new window. For example, use the following script in the destination document to change the background color of the window that opened it:

window.opener.document.bgColor = "beige";

If you've got sharp eyes, you probably noticed the problem with this statement. We must check if the opener window still exists before attempting to access its properties. Here's the correct code:

if (window.opener && !window.opener.closed)
  window.opener.document.bgColor = "beige";

The opener property is very useful, because it completes the bidirectional connection between the opener window and the opened window. Take a look at the following form field:

Let's see how this works. First, here's the HTML code for the form:

<FORM NAME="stockForm">Enter your favorite tech stock:
<INPUT TYPE="text" NAME="stockBox" SIZE="10" VALUE="">
<INPUT TYPE="button" VALUE="list" onClick="showList()">
</FORM>

Notice that the name of the form is stockForm, while the name of the text field is stockBox. The "list" button launches the showList() function. We have also implemented an onUnload event handler in this document's <BODY> tag, which invokes the remLink() function. Here's the code for these two functions:

<SCRIPT LANGUAGE="JavaScript">
<!--
function showList() {
  sList = window.open("stocklist.html", "list", "width=150,height=210");
}
function remLink() {
  if (window.sList && window.sList.open && !window.sList.closed)
    window.sList.opener = null;
}
// -->
</SCRIPT>

The remLink() function sets the subwindow's opener property to null when the current document unloads. The script in the new window checks the opener property before assigning a value to the text field. We must use this function because the new window's script shouldn't try to access the text box if a different document has been loaded in this window.

Here's the HTML code for stocklist.html:

<HTML>
<HEAD>
<TITLE>Stock List</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function pick(symbol) {
  if (window.opener && !window.opener.closed)
    window.opener.document.stockForm.stockBox.value = symbol;
  window.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
<TR BGCOLOR="#cccccc"><TD><B>NYSE</B></TD><TD><B>NASDAQ</B></TD></TR>
<TR><TD><A HREF="javascript:pick('AOL')">AOL</A></TD>
<TD><A HREF="javascript:pick('CSCO')">CSCO</A></TD></TR>
<TR><TD><A HREF="javascript:pick('CPQ')">CPQ</A></TD>
<TD><A HREF="javascript:pick('INTC')">INTC</A></TD></TR>
<TR><TD><A HREF="javascript:pick('NOK')">NOK</A></TD>
<TD><A HREF="javascript:pick('SUNW')">SUNW</A></TD></TR>
<TR><TD><A HREF="javascript:pick('LU')">LU</A></TD>
<TD><A HREF="javascript:pick('AMZN')">AMZN</A></TD></TR>
<TR><TD><A HREF="javascript:pick('T')">T</A></TD>
<TD><A HREF="javascript:pick('MSFT')">MSFT</A></TD></TR>
</TABLE>
</BODY>
</HTML>

Next: How to create a dialog box

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: https://www.webreference.com/js/tutorial1/opener.html

Working with Windows: Referencing the Opener

Working with Windows

Referencing the Opener

The opener Property

Find a programming school near you