How to use JavaScript to manipulate browser windows and the HTML documents (pages) they display.
See the chapter on advanced page topics in the Programmer's Guide |
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:
location='ManipulateDocuments.test.html';
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:
parent.frames[1].location='ManipulateDocuments.test.html';
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';
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:
Related reading
win = window.open("","demo",
"width=400,height=245");
With a document
This example opens a new window named silv, and loads the home page of a Web site in it:
win = window.open("http://www.silverstream.com","silv",
"width=600,height=400");
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 = window.open("","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.");
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 = window.open("","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("<p>");
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.