JavaScript: opener

 

opener

When you open a new window, the 'opener' object gives the new window a way of referring back to the window that opened it. Using 'opener' or 'self.opener' allows the new window to, for example, change the contents of text boxes back in the original window.

 

Example

Let's do an example in which we first open a new window. In the new window, we use 'prompt' commands to ask the viewer three questions. The viewer then clicks a button that stores her responses -- not in the new window, but back in the original window. We use the 'self.opener' object to modify the original window from within the new window.

First we set things up in the HTML file that creates the original window:

<script language=JavaScript>
<!--
var newWindow

function makeNewWindow()
{
if( !newWindow || newWindow.closed )

newWindow = window.open("javaScriptEx26.html","","height=250,width=500,resizable")
}

//-->
</script>
</HEAD>

<BODY>
<form>
<input type=button name=button1 value="Open A New Window" onClick=makeNewWindow();>
<p> </p>
<table>
<tr>
<td>Your Name:
<td><input type=text name="name" value=" " style="border-width:0; background-
color:#FFFFEB">
<tr>
<td>Car You'd Like to Own:
<td><input type=text name="car" value=" " style="border-width:0; background-
color:#FFFFEB">
<tr>
<td>Favorite Music Genre:
<td><input type=text name="music" value=" " style="border-width:0; background-
color:#FFFFEB">
</table>
</form>

In the HTML above, we set up a table with three rows. Within each row is a text box, one for the viewer's name, one for her preferred car, and one for her favorite music. Nothing is stored in these text boxes. In the 'style' tag inside each 'input type=text' line, I define the border of the text box to have 0 width, and set the background color of the text box to match the page's background. In this way, the text box is invisible, which can be a nice effect.

When the viewer clicks on the button ('Open A New Window') the function 'makeNewWindow()' is run. This function opens a new window.


Next we set up the file (javaScriptEx26.html) that is opened in the new window that is created by the script above:

<script language=JavaScript>
<!--

function getInfo()
{
yourName = prompt("What's your name?","Bones")
car = prompt("What car would you like to own?","1968 VW Beetle")
music = prompt("What is your favorite music genre?","Opera")
}

function updateMainWindow()
{
self.opener.document.forms[0].name.value = yourName;
self.opener.document.forms[0].car.value = car;
self.opener.document.forms[0].music.value = music;
}

//-->
</script>
</HEAD>

<BODY>
<p>Please answer three questions so that we can inundate you with junk mail:<p>
<a href="javascript:getInfo();">OK I'll answer them</a>
<p>Then move this window so that you can see both the main window and this window at the
same time, and click the button below:</p>
<input type=button name=updateMainWindow value="Update Text Boxes in Main Window"
onClick="updateMainWindow();">

In this script, the function 'getInfo()' asks the viewer 3 questions. This function is called when the viewer clicks on the link ('OK I'll answer them') defined in the <BODY> section.

When the viewer clicks on the button ('Update Text Boxes in Main Window') the function 'updateMainWindow()' is called. This function stores the viewer's responses to the 3 questions in the 3 text boxes defined in the original window. Let's look at one of these statements:

self.opener.document.forms[0].name.value = yourName;

'self.opener' refers to the original window. 'self.opener.document.forms[0]' refers to the form in the original window that holds the 3 text boxes. 'name' is the name of the 1st text box, so the effect of this statement is to store the viewer's name in the 1st text box in the original window.

to see this how this code behaves in a new window.
Note: This example does not fully work in Navigator.

 

Other Resources

Try these links on the 'opener' object and opening new windows:


Page Link
Opening New Windows webteacher.com/javascript/ch05_2.html
Window Opener wsabstract.com/script/cut123.shtml

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Write the HTML and JavaScript necessary to create a page in which the viewer can open a new window that asks him for some financial information. The new window does some calculations and stores the result back in the original window.

In the HTML that creates the original window, create a text box and label it "Net Weekly Income." (You can use the technique mentioned above to make the text box invisible, if you want to.) Have a button in the original window which, when clicked, opens a new window.

In the file that creates the new window, ask the viewer 3 questions. Ask him what his hourly wage is, how many hours he typically works per week, and what fraction of his pay goes to taxes (0.15 is a good guess for that). Calculate his net weekly income -- how much money he takes home after taxes. Provide the viewer with a button; when he clicks, store his income in the text box labeled "Net Weekly Income" in the original window.