Opening (and Closing) New Windows
There are a variety of reasons for opening a link in a new window. The developer may want a pop-up window containing a legal disclaimer or other notice, or the developer may want to provide a link to an external site without having people leave the site.
If a developer wants to open an external link in a new window, it has been a common practice to use target="blank", as in the following example:
<a href="url" target="_blank">URL</a>
There are two problems with that code: 1) The developer has no control over the location and size of the new window and, 2) The target attribute is being deprecated. Fortunately, there is a better alternative to target="blank". Developers can use JavaScript to open a new window and have control over a number of features such as the size and the location of the new window. On this page we will feature a couple of JavaScripts written by Trent Pastrana of 4 Level Webs. For Dreamweaver users, these scripts are available as free extensions from Trent's site at http://www.fourlevel.com/.
Open New Browser Window
Here are two examples of a JavaScript that opens a new browser window:
1. This example opens a new window, 300 x 300, located 20 pixels from the left edge and 20 pixels from the top, with all the window features.
2. This example opens a new window, 200 x 200, centered, without any window features.
Here is the script:
1) Place the following script in an external JavaScript file or between the <head></head> tags of the page:
function Lvl_openWin(u,n,w,h,l,t,c,f,x) { //v1.0 4LevelWebs
var ww=((screen.width-w)/2);if(c==1){l=ww;t=(screen.height-h)/2;}if(c==2){l=ww}
f+=',top='+t+',left='+l;LvlWin = window.open(u,n,f);if(x==1){LvlWin.focus()};
}
2) If you use an external JavaScript file (the preferred method), link the external JavaScript file to your page by placing the code below between the <head></head> tags of the page:
<script type="text/javascript" src="scriptname.js"></script>
3) Add the following code to your page where you want the link to open the new window:
<a href="javascript:;" onclick="Lvl_openWin('url','window
name',
'width','height','position left','position top','center window',
'window features','focus')">link text</a>
Here is an explantion of that script:
- url - the address of the page that is to appear in the new window.
- window name - the name of the new window so that it can be referenced, if necessary.
- width - the width of the new window in pixels.
- height - the height of the new window in pixels.
- position left - the position from the left edge in pixels.
- position top - the position from the top in pixels.
- center window - 0 = "no" and 1 = "yes. If the window is to be centered, position left and position top should be 0.
- window features - with the exception of width and height, the following
features are optional (don't include them if you don't want them). Separate
the features with commas (i.e., toolbar=yes,location=yes). Always include
width and height, and make sure they agree with the width and height you
specified above:
- toolbar=yes
- location=yes
- status=yes
- menubar=yes
- scrollbars=yes
- resizable=yes
- width=xxx
- height=xxx
- focus (0=no and 1-yes)
Closing A New Window
If the link being opened in the new window is not external (i.e., if you control the page in the new window), it is a good idea to provide a CLOSE button in the new window. Just add the following code to the page that is being opened in the new window:
<form action="null">
<input type="button" alt="button" value="Close
Window" onclick="self.close()" />
</form>