How can I open a new browser window from a link?

When you want create a new window when the user clicks on a link then you must change the link. If you don't mind how big this new window is than use the attribute target="_blank" of the A tag. This is a quick and easy solution.

The disadvantage is the amount of control you have over the look of the new window. If you want to create a new window with a size you define yourself then another solution is needed. This solution uses a JavaScript to create that new window.

Source
<SCRIPT language="javascript">
function createWindow(cUrl,cName,cFeatures) {
var xWin = window.open(cUrl,cName,cFeatures)
}
</SCRIPT>

Put this script in the HEAD section of the page. The script creates a new window with the JavaScript window.open() function, and should be called from the link:

Source
<A href="javascript:createWindow('url','name','features')">new window</A>

The function uses the follwing parameters:

url
The URL of the page that you want to load in the new window.

name
The name that you give to the new window. This can be useful if you want to reuse a window. If you use the same value a second time then no new window will be created, but the contents of the window will be replaced with the page supplied in the new URL.

features
You can control the look and size of the new window with a set of window features. These features must be supplied as a single string, with the features separated by commas.

This parameter is optional. If you do not supply it, the default features will be available in the new window.
Otherwise, if you do supply a value, then only the features you supply will be available in the new window.

Possible features for a new window
Feature string Description
copyhistory The history of visited pages available in the "Go" menu.
directories The row with buttons that link to predefined addresses.
height=x The height of the new window in pixels. Replace x with the value you want to use.
location The field where the user can enter an URL.
menubar The menubar of the browser.
resizable The possibility for the user to resize the window.
scrollbars Display scrollbars if the page contents do not fit in the window.
status The statusbar of the window.
toolbar The bar with buttons to navigate, like "Back" and "Forward".
width=x The width of the new window in pixels. Replace x with the value you want to use.

For example, if you want to create a new window, with a size of 400x200 pixels, plus a status bar and the location field, then you must use this features string:

width=400,height=200,status,location

Now a complete link to the file faq13demo.html with the previous features looks like this:

Source
<A href="javascript:createWindow('faq13demo.html','window2','width=400,height=200,status,location')">new window</A>
 
Result
new window

Back to the FAQ main page
Statistics

  Copyright © 1996 - 1999 Rob Schlüter,   schluter@knoware.nl   (last updated 1999/03/01)