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:

• url - The url string to be diplayed in the window. This setting is optional for when you want to write content to the window depending on user input. More on this later.
• name - The unique name string given to a window. This value can be used for target attributes for links. If this value is not unique, any other windows created with the same name will replace this window.
• parameters - Comma seperated string of parameters. There should be no spaces in this list. Any parameters left out will be displayed by default. Basic format is parameter1=value1,parameter2=value2,etc.... If the parameter is specified, but no value is assigned, it will default to yes (This rules does not apply to parameters that need values such as width, height, etc).
  
  
  • height - Height of the content of the window in pixels. This does not include menubar/statusbar.
  • width - Width of the content of the window in pixels.
  • menubar - Specifies if the menubar (File, Edit, View, etc) is displayed. yes or no.
  • scrollbars - Specifies if the scrollbars are displayed. yes or no.
  • toolbar - Specifies if the button images (back, forward, reload, stop, etc) bar is displayed. yes or no.
  • status - Specifies if the status bar is displayed. yes or no.
  • left (use screenX for Netscape 4) - The horizontal window position in pixels from the left of your monitor screen.
  • top (use screenY for Netscape 4) - The vertical window position in pixels from the top of your monitor screen.
  • resizable - Specifies if the window is resizable. yes or no. Watch for spelling, many people mistankingly use "resizeable" instead, which will not work.

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( 'https://scriptasylum.com', 200, 200 ,0 ,0 ,0 ,0 ,0 ,1 ,10 ,10 )">Link text here</a>

Usage: openWindow( url , w , h , tb , stb , L , mb , sb , rs , x , y )


• url - The URL of the page to open. Example: "https://scriptasylum.com".
• w - The width of the window in pixels.
• h - The height of the window in pixels (doesn't include menubars).
• tb - Toolbar visible? 1 = yes, 0 = no.
• stb - Status bar visible? 1 = yes, 0 = no.
• L - Linkbar visible? 1 = yes, 0 = no.
• mb - Menubar visible? 1 = yes, 0 = no.
• sb - Scrollbars visible? 1 = yes, 0 = no.
• rs - Resizable window? 1 = yes, 0 = no.
• x - The horizontal position of the window from the left of the screen.
• y - The vertical position of the window from the top of the screen.

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.