Launching windows using JavaScript

---

Home/JavaScript/Guest- Windows

Whatever your feelings about popup windows may be, you must admit they can be very useful when used in the appropriate setting. Most of us are familiar with setting the target of a link to "_new" to spawn a secondary browser; in this tutorial, I shall discuss using JavaScript to facilitate the launching of windows. Let's just say things can get a lot more interesting that way.

JavaScript can help load 3 kinds of windows:

-Regular secondary window
-Modal window
-DHTML window

Regular secondary window

This is similar to using the target="_new" attribute inside a link, except you get to customize virtually every aspect of the window. The basic command is:

<script>
window.open("http://www.yahoo.com")
</script>

You can configure how this window will appear, by inserting one or more of the below keywords into the method's 3rd parameter:

window.open("http://www.yahoo.com","","width=400,height=400") //window with dimensions 400x400
window.open("http://www.yahoo.com","","menubar=1") //window with nothing EXCEPT menubar
window.open("http://www.yahoo.com","","resizable=1,scrollbars=1") //window with scrollbars, resizable

Below I show how to launch a window with dimensions 500x400 and nothing but the status bar through a button:

<script>
function loadwindow(){
window.open("http://www.yahoo.com","","width=500,height=400,status=1")
}
</script>

<form><input type="button" onClick="loadwindow()" value="Load Window"></form>

"status=1" tells the method to display the status bar; "1" is the computer equivalent of "yes".

Manipulating the window

Allow me at this point to deviate a bit from the main topic and discuss a few things you can do to a window once its opened. How would you like to use scripting to reload or close a window, even move it around? Thanks to a variety of window methods, you can!

-window.location.reload() //reloads window
-window.close() //closes window
-window.moveTo(x,y) //moves window to specified location
-window.moveBy(x,y) //moves window by specified offset
-window.resizeTo(x,y) //resizes window to specified dimensions
-window.resizeBy(x,y) //resizes window by specified amount

To use these methods on the current window, simply call them as is on the page. You can also use them on the opened window, by following these two steps:

Step 1: When opening a window, assign a variable to it:

mywin=window.open("http://www.geocities.com")

Step 1: Use this variable to reference the opened window, then apply the desired method on it:

mywin.location.reload //reload mywin
mywin.moveTo(0,0) //positions window at upper left corner of monitor

Ok, getting back on track...

Modal Window

Modal windows are a fun Internet Explorer specific feature. The window sits "focused" on the page until the user clicks on the close button. The window does not go into the background no matter what (for example, clicking on the main window).

window.showModalDialog("http://www.altavista.com","","dialogWidth:500px;dialogHeight:500px")

Notice how I use dialogWidth and dialogHeight to specify the window's dimension. You also need to specify the unit, which in this case I use px.

DHTML Window

A new type of window is emerging, one I think is worth mentioning. It is now possible to recreate the entire window interface through JavaScript and DHTML. The result is a less intrusive, inline popup window.

The demo is based on the impressive DHTML window from Dynamic Drive, where you can get the source for it.

Another illustration of a DHTML window is Scott Andrew's DOM window.

---

Tutorial Credits:
Name: Andy Scott

---

---

Other Topics: ASP/PHP | DHTML | Java

---

The tutorials and articles on these pages are © 1997-2010 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---