Home / JavaScript Tutorials / Windows and JavaScript

JK Help Forum
Having trouble with anything? Visit our help forum to get the answers you need.

Want to print this page? Use this version instead.

Jump to...
-Tutorial Index
-Free JavaScripts
-Free Java Applets
-Web Tutorials
-Frontpage Tutorials

Click here for low cost, high quality web hosting!

Link to us!
We always welcome and appreciate links back to JavaScript Kit. Click here for details.

Windows and JavaScript (one part)

Using JavaScript, we can manipulate windows-open them, close them, reload them, load another page into them-just name it.

• opening a new window using JavaScript

• Hiding/showing toolbars, menu bars, status bus etc upon opening a window

• reloading, closing, loading new content into a window using JavaScript

• Accessing objects of a window via another

Opening a new window using JavaScript

With JavaScript, you can easily manipulate windows. One of the most asked questions when it comes to windows is how to open more than one window. Ok, then, lets first talk about that. To open a window, simply use the open() method of JavaScript. (window.open())

window.open("URL")

Lets say you just want to open a window containing "page2.htm"

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm')"
</form>

Hiding/showing toolbars, menu bars, status bus etc upon opening a window

Lets talk about some of the attributes we can add to the above script to control not only the size of the opened window, but also, what is to be shown: toolbar, menu bar etc. To add attributes when a window is opened, we still would use the window.open() method, but with a little addition:

open("URL","name","attributes")

As you can see, we first have to add in a name (this name has nothing to do with adding attributes-it is the window name used in the TARGET attribute of a <a> and <form> tag-don't worry about it, it is not commonly used). Moving on, here are the complete list of attributes you can add:

Here is an example that opens a window that's not only smaller in size, but with ONLY the menubar turned on:

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm',
'win1','width=200,height=200,menubar')"
</form>

Here is another example with no attributes turned on, except the size changed:

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm',
'win1','width=200,height=200')"
</form>

Play around with them, if you like, but I'll end it here.

Reloading, closing, loading new content into a window using JavaScript

With JavaScript, we can write code that replaces the "reload" and "close" button of our browser.

To reload a window, use this method:

window.location.reload()

Here's an example:

To close a window, use this method:

window.close()

I was almost tempted to provide an example!

Ok, we can also load new content into a window using JavaScript-this is similar to the <a> tag in html, only now, using JavaScript, we have more control over this process.

The basic syntax when loading new content into a window is:

window.location="yoururl.com"

This is exactly the same as

<a href="yoururl.com></a> //if we use html

Lets provide an example, where a confirm box will allow users to choose between going to two places:

<script>
<!--
function warp()
{
var ok=confirm('Click "OK" to go to geocities, "CANCEL" to go to CNN')
if (ok)
location="http://www.geocities.com"
else
location="http://www.cnn.com"
}
//-->
</script>

Accessing objects of a window via another

After you open a secondary window, there is a connection between the original window and this newly opened one that allows you to cross-access objects/variables, properties of each window. But before we discuss how this is done, we need to first discuss window names, a very different kind from the one mentioned in the beginning of this section.

Look at below:

var hello=
open('page2.htm','hi','width=200,height=200')

By giving this window a name using the above method, for example, "hello", it will give you access to anything that's inside this window from other windows. Whenever we want to access anything that's inside this newly opened window, for example, to write to this window, we would do this: hello.document.write("hi!")
Ok, lets say you want to, from the current window, open a secondary window, and FROM HERE, change the background color of this newly opened window.

The radio buttons are here, but we have changed the bgcolor of another window...lets see the core code:

//for button
onClick="win1=open('page2.htm','winname',
'width=200,height=200')"

//for radio button3
onClick="win1.document.bgColor=
'lightgreen';win1.focus()"
//for radio button2
onClick="win1.document.bgColor=
'lightyellow';win1.focus()"
//for radio button3
onClick="win1.document.bgColor=
'pink';win1.focus()"

The most important part is: win1.document.bgColor, which is what caused the bgcolor to change in the secondary window, instead of the one that contains the script. Also notice that we used another method, focus(), to bring focus to the second window every time it changes.

Here's the complete listing of the window object we touched upon in this tutorial:

End of Tutorial

http://www.javascriptkit.com
CopyRight © 1997, 1998 JavaScript Kit. NO PART may be reproduced without author's permission.