You may find it useful to control a parent window from a generated popup window, such as being able to manipulate its look, content, etc. One example being a web application I wrote for work. In the portion for entering a new sales order, products are added from a popup search window. When the product being added is selected, a button is clicked and the parent window’s line item table is modified to include the selected product. This is only one example as many others exist. This tutorial will discuss how to launch a popup window and change properties of the parent (colors, fonts, sizes, and styles).

Parent Window Screenshot for JavaScript ManipulationWe begin with creating the parent window. There won’t anything fancy with it, just a H1 title, a couple paragraphs of text, and a link to launch the popup window controller. To the left is a screenshot of what our parent window will look like when the HTML has been added. In the code some elements have been added to allow us to use JavaScript to control (manipulate) the contents of the parent window. Namely id attributes for the H1 and P tags for use the the Document Object Method getElementById.

Parent Window HTML + JavaScript Code ( parent-window.html ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Parent Window [ JavaScript: Controlling a Popup Window's Parent Window ]</title>
</head>
<body>
<h1 id="page_title">The Parent Window</h1>
<p id="paragraph1">This is the window that will be controlled by the popup window.</p>
<p id="paragraph2">Click the link below to open the popup window controller.</p>
<p> </p>
<p><a href="#" onclick="javascript:window.open('popup-window.html','popupwindow','width=450,height=250,menu=0,status=0');">Launch Popup Window</a></p>
<p><small>Note: Please disable any popup blocker software if you don't see the popup window.</small></p>
</body>
</html>

You’ll see that the code for opening the popup window is located in the href onclick. The JavaScript window.open is called and the popup window filename is passed as the first parameter, followed by a name for the window, and lastly the specs for the window appearance (width, height, hide the menu and status bars).

READ  Block CIDR IP Blocks via Apache .htaccess HOWTO

Popup Window Screenshot for JavaScript Parent Window ManipulationWith the parent window created the next step is to create the popup window. The purpose of the popup window is to control its parent window. For this demonstration it’s accomplished through a series of buttons that call JavaScript functions that alter the parent window’s properties (as seen on the left). I have created buttons that change the window’s background color, the font family for the H1 title, the font size for the first paragraph, the font style for the second paragraph, and to reload the parent window page. Obviously I’m only scratching the surface here as much more can be done with JavaScript to alter the parent window.

Popup Window HTML + JavaScript Code ( popup-window.html ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Popup Window [ JavaScript: Controlling a Popup Window's Parent Window ]</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
<!--
var parent_window = window.opener;
var bgcolor_index = 0;
var h1font_index = 0;
var para1_index = 0;
var para2_index = 0;

function backgroundColor() {
  var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#cccccc', '#ffffff'];
  if (parent_window && !parent_window.closed) {
    parent_window.document.body.style.backgroundColor = colors[bgcolor_index];
    if (++bgcolor_index > colors.length - 1) { bgcolor_index = 0; }
  }
}

function h1TitleFontFamily() {
  var fonts = ['Arial', 'Helvectica', 'Sans Serif', 'Verdana', 'Times New Roman'];
  if (parent_window && !parent_window.closed) {
    var page_title = parent_window.document.getElementById('page_title');
    page_title.style.fontFamily = fonts[h1font_index];
    if (++h1font_index > fonts.length - 1) { h1font_index = 0; }
  }
}

function paragraph1FontSize() {
  var sizes = ['8pt', '12pt', '16pt', '20pt', '32pt', '64pt'];
  if (parent_window && !parent_window.closed) {
    var paragraph1 = parent_window.document.getElementById('paragraph1');
    paragraph1.style.fontSize = sizes[para1_index];
    if (++para1_index > sizes.length - 1) { para1_index = 0; }
  }
}

function paragraph2FontStyle() {
  var styles = ['oblique', 'italic', 'normal'];
  if (parent_window && !parent_window.closed) {
    var paragraph2 = parent_window.document.getElementById('paragraph2');
    paragraph2.style.fontStyle = styles[para2_index];
    paragraph2.style.fontWeight = 'bold';
    if (++para2_index > styles.length - 1) {
      para2_index = 0;
      paragraph2.style.fontWeight = '';
    }
  }
}

function reloadParent() {
  if (parent_window && !parent_window.closed) {
    parent_window.location.reload(true);
  }
}
// -->
</script>
<h1 align="center">The Popup Window</h1>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="center" valign="middle"><input type="button" name="button1" id="button1" value="Background Color" onclick="backgroundColor();" /></td>
<td align="center" valign="middle"><input type="button" name="button2" id="button2" value="H1 Title Font Family" onclick="h1TitleFontFamily();" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input type="button" name="button3" id="button3" value="Paragraph 1 Font Size" onclick="paragraph1FontSize();" /></td>
<td align="center" valign="middle"><input type="button" name="button4" id="button4" value="Paragraph 2 Font Style" onclick="paragraph2FontStyle();" /></td>
</tr>
<tr>
<td align="center" valign="middle" colspan="2"><input type="button" name="button5" id="button5" value="Reload Parent Window" onclick="reloadParent();" /></td>
</tr>
</table>
</body>
</html>

I’m not going to go over all the code. The key to making the popup control the parent is the Window object’s opener property ala window.opener. In my code I assign it to a variable called parent_window which I use throughout my functions. By referencing it in front of the document object you can hook into the window properties of the parent much like you would for any foreground window. Having done so you now have access to getElementById and other Document Object Methods to get a handle to the object. Add some creative JavaScript and you can build some pretty interesting web applications with popup windows.

READ  Graphics And Video Settings: A Basic Guide