Open a Second Window on a Web Page with a Javascript Windows Command

Written by: cra8051 • Edited by: Michele McDonough
Updated Sep 12, 2011 • Related Guides: Microsoft | Windows | Windows Explorer

Current browsers can open multiple windows in tabs. However, sometimes you might find it useful to open more browser windows within the same window. One use might be to display detailed help information within the same window as the main screen, making it available only if the user chooses.

Create the Primary Page

You certainly can use a Web programming application like Dreamweaver or Microsoft Expression to do this, but to keep things as simple as possible, create this little program using Notepad or another text editor. First, create a basic HTML page with some text on it. If you already have one that you want to experiment on then skip this step. Otherwise, type the lines below in Notepad and save it with a file name “Main_Window.html” replacing the default txt extension with html. Also, delete the **** beginning the Javascript line. It is there only to keep the script from executing in this article.

<HTML>

<BODY>

This will be my main page.

****<SCRIPT LANGUAGE=”javascript”>

window.open ('New_Window', 'pageone', config='height=250,width=250')

</SCRIPT>

</BODY>

</HTML>

Note: Do not leave spaces between the height and width definitions.

Create the Second Page

Close this file and create another file that will be the second window by typing the next lines of code. Save this as New_Window.html

<HTML>

<BODY>

Hi there! This new window can say anything you want.

<FORM>

</FORM>

</BODY>

</HTML>

It is a good idea to test these two by locating the files in Windows Explorer, right clicking on them one at a time and selecting “Open With” and Firefox or Internet Explorer, or whatever other browser you are using.

The associated images show these pages as developed to this point.

Open Another Window

It is perfectly possible to open browser multiple windows by chaining them together as long as you do not get confused about names. For example, you can follow the same process that opened the second window by adding similar code. The button actions as above are not required if you want to open the windows immediately. Add them only if you want to open the windows on a command rather than when the first page loads, using similar text and coding <input type=”button” value=”Next page” [or similar language] and “onClick=”open.window([insert new file names]). Windows also can contain direct URLs to completely unassociated pages—your home page for example—besides opening another window. If you do this but still want to keep one or more of your original windows open, include the “target” setting, for example, at the end of the URL, add this “target-“_blank.”

The attached images show the third open page plus a live version showing both open in the same window.

Hints

Create the content for the successive pages before you set the height and width configuration so there are no problems with display. However, do not try to put too much information on the screens after the first to avoid problems with users who have smaller display screens.

Firefox can be a bit stickier than IE about pop-up windows so if you are using this and do not see the successive windows, check the popup settings. Even with this, depending on the version, it seems that Firefox may display the popup behind the first window.

When you load this on a server, modify the file locations in the configuration lines to point to the right locations.