Application Techniques

Manipulating Documents and Windows with JavaScript

How to use JavaScript to manipulate browser windows and the HTML documents (pages) they display.

About this technique



HTML Client Techniques> JavaScript


You'll learn about:

You can run this technique code from:

Related reading

See the chapter on advanced page topics in the Programmer's Guide

Switching the document in a window   Top of page

To switch the document that a window or frame displays, you can use JavaScript to modify the window's location property.

For the current window

The following code switches the document in the current window or frame:


For another window

You can also switch the document in another window or frame. This example displays a different document in the second frame of the current frameset:


The object parent refers to the window that contains the current frame. The frames[] array contains a reference to each frame in the window. The frames are counted top to bottom, left to right. The first frame in the window is frames[0], the second is frames[1], and the third is frames[2].

You can also refer to frames by the name specified in the frameset. In the example frameset, the second frame is named toc, so you could code:

  parent.toc.location ='ManipulateDocuments.test.html'; 

Opening a new window   Top of page

You can use JavaScript to open a new window by coding the open() method of the window object.

With no document

This example opens a new window named demo, but doesn't specify a document to load in it:

  win ="","demo", 

With a document

This example opens a new window named silv, and loads the home page of a Web site in it:

  win ="","silv", 

Writing to the document in a window   Top of page

Once you've opened a window, you can use the write() method of the document object to modify the page it displays. For example:

  win ="","demo","width=400,height=245"); 
  win.document.write("<html><head><title>Example: Writing a Document</title>"); 
  win.document.write("<body bgcolor=#C8D7DE text=maroon><p>"); 
  win.document.write("<b>Example: Writing a Document</b><br>"); 
  win.document.write("You have written to the new document in this new window."); 

Passing information between windows   Top of page

The live example also shows how you can use JavaScript to pass information back and forth between a new window and the window that opened it. Here's the code:

  win ="","demo","width=400,height=245"); 
  win.document.write("<html><head><title>Example: Passing Information</title>"); 
  win.document.write("<body bgcolor=#C8D7DE text=maroon><p>"); 
  win.document.write("<b>Example: Passing Information</b><br>"); 
  win.document.write("You have passed information to this new document in this new window."); 
  win.document.write("<form name=\"new_data\">"); 
  win.document.write("Your name: <input type=\"text\" name=\"uName\" "); 
  win.document.write("value=\"" + document.data_form.uName.value + "\">"); 
  win.document.write("<input type=\"button\"" + 
     "onClick=\"window.opener.document.data_form.uName.value=document.new_data.uName.value\"" + 
     "value=\"Pass edited field back to opener window\"></form>"); 

The opener property of the window object refers to the window that opened the new one.

Copyright © 2000, SilverStream Software, Inc. All rights reserved.