Tutorial - Javascript Windows

This tutorial explains how to open windows using javascript and how to control their appearance.


Topic 1 - Setting current window dimensions and placement with Javascript.


By adding a little javascript to any page, you can have a window opened full screen no matter if the window was opened normally or via javascript.
Just add these 2 lines of code in a set of javascript tags:
self.resizeTo(screen.width,screen.height); //THIS LINE RESIZES THE WINDOW BASED ON CURRENT SCREEN DIMS
self.moveTo(0,0);                          //THIS LINE MOVES THE WINDOW TO X,Y COORDINATE ON THE SCREEN.
As you might imagine, you can use different values here to have the window open itself wherever and whatever size you want. Just change screen.width and screen.height in the self.resizeTo() method to change the size value. Change the zeros in the self.moveTo() method to adjust where the window appears on the screen.


Topic 2 - Opening new windows with Javascript


You'll notice in the previous example there is no way to control if the menubar, toolbar, statusbar, or linkbar, or scrollbars are visible. You also can't control whether the window is resizable either.

You can control these settings if you use javascript to open a window instead. You would use the window.open(url, name, parameters) javascript method. This just opens a basic window, but there are a bunch of other attributes you can set to control how this window looks. Below, you'll find a list of the most commonly used attributes:
Now that you know most of the parameters (there are a few others, but they only work in certain browsers), you can build your own windows.

A common question is how to ensure the window name is different for each window. Well, there are a few different ways, but what I like to do is to use a base string and append the current time (in milliseconds since 1/1/1970) to it.
var basestring="window"+new Date().getTime();
So, the contents of basestring would now be "window1011660287487". This value will increment every millisecond, therefore the name will change too.

OK, now let's say you don't want the url to be a specific page because you want it to display something based on a users input. You can write content to a window too. You use the write() method on the window. To do this, you have to assign the window.open() to a variable so you can still refer to the window. See the script and demo below. The part in bold demonstrates the writing to the window:
function zfill(n){ //this function to fill in zeros so there will always be 2 digits for time display
n=n+'';
while(n.length<2)n="0"+n;
return n;
}

function writeWindow(){
var n=new Date();
var x=window.open('', 'newWin'+n.getTime(), "width=300,height=100");
var txt='';
txt+='<html>';
txt+='<head><title>A dynamic page</title></head>';
txt+='<body>';
txt+='This content was written to the window dynamically. ';
txt+='The time is '+zfill(n.getHours())+':'+zfill(n.getMinutes())+':'+zfill(n.getSeconds());
txt+='</body>';
txt+='</html>';
x.document.write(txt);
x.focus();
}
See an example of the above code here.


Script Extra - Script to facilitate opening windows.

I've created a function to simplify the creation of making windows. You just "feed" it the values you'd like and the script takes care of the hard part.
function openWindow(url,w,h,tb,stb,l,mb,sb,rs,x,y){
var pos=(document.layers)? ',screenX='+x+',screenY='+y: ',left='+x+',top='+y;
tb=(tb)?'yes':'no';
stb=(stb)?'yes':'no';
l=(l)?'yes':'no';
mb=(mb)?'yes':'no';
sb=(sb)?'yes':'no';
rs=(rs)?'yes':'no';
var txt='';
txt+='scrollbars='+sb;
txt+=',width='+w;
txt+=',height='+h;
txt+=',toolbar='+tb;
txt+=',status='+stb;
txt+=',menubar='+mb;
txt+=',links='+l;
txt+=',resizable='+rs;
var x=window.open(url, 'newWin'+new Date().getTime(), txt+pos);
x.focus();
}
Example: This link opens a new window using the code above.

You would call this function by using a pseudo url like: <a href="javascript:openWindow( 'http://scriptasylum.com', 200, 200 ,0 ,0 ,0 ,0 ,0 ,1 ,10 ,10 )">Link text here</a> Many times, if windows are opened in this manner, there is usually some method of closing the window with a button or a simple text link (images work too). Here's how that is done:

<form><input type="button" value="Close" onClick="self.close()"></form>
or
<a href="javascript:self.close()">Close me</a>

Either way, the process is similar, both of them use the self.close() javascript method.

Note that you cannot do this in example 1. You can only close a window using javascript if the window was created using javascript. Some browsers do not follow this rule though, but for full compliance across browsers, I recommend sticking to the rules.