Opening Windows using JavaScript

Generally, we are familiar with setting the target of a link to "_new" to spawn a secondary browser;  there are other interesting ways of opening/launching of windows too using JavaScript.

JavaScript can help load 3 kinds of windows:

-Regular secondary window
-Modal window
-DHTML window

<script>
function loadwindow(){
window.open("http://www.hurricanesoftwares.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

There are various methods available to move, close, resize or reload the window.

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.hurricanesoftwares.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.hurricanesoftwares.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.


0 I like it
0 I don't like it