Opening a new window with Javascript

Posted in Javascript -

On the odd occasion when I need to open a popup window with Javascript I always have to reach for my O'Reilly Javascript book, look in the index and find the appropriate page because I never can remember what the parameters are. So this post gives me an easy reference place for how to open a window with Javascript.

Opening a window with window.open in Javascript

The basic syntax to open a window is:

window.open(url, name, features);

Substitute "url" with the url you want to open, give it a name with the "name" parameter and some features e.g. width and height. You can leave "name" as en empty string to open a new window every time; if you specify a name then every call with the same name will open the url in the same window.

Features I use

The features are the useful bit where you can specify all sorts of useful stuff, with each value comma separated. The ones I use most commonly are as follows:

height: Specify the height of the window to open. For example, to make it 600 pixels high you would specify height=600. Note this is the height of the document area so the actual window itself will be slightly bigger once you take into account the browser chrome.

width: Same as for height but specifies the width. e.g. width=400

resizable: By default these Javascript popup windows are not resizable. Adding "resizable" to the list of options will allow users to resize the window should they wish to.

scrollbars: Scrollbars are also not enabled by default. Adding "scrollbars" to the list will show horizonal and/or vertical scrollbars if they are needed. If this is enabled, Internet Explorer will still have a disabled vertical scrollbar when there's no vertical scrolling (and will it will then be enabled if it's needed).

Features I don't use

The following are some additional options I don't normally use myself. There are some more available but they're probably even less useful than those below.

menubar: Whether or not to show the application's menu (i.e. the File, Edit etc part).

location: Whether or not to show the browser's URL address area. In recent browser versions the location appears regardless of this setting, although it's read-only. When enabled it shows a normal URL address area in Internet Explorer 7 but doesn't seem to for Firefox 3 unless the "toolbar" feature is specified (see below). To enable it simply add "location" to the list.

toolbar: I don't normally use this one or the location one above, but in testing for this post I discovered the location area won't show in FF3 unless this is enabled. It shows the browser toolbar with back and forward buttons etc and is enabled by adding "toolbar" to the list.

status: This one is meaningless now. In older browsers when Javascript windows opened they wouldn't show a status bar at the bottom of the window and this is how you could enable it. However neither Internet Explorer 7 nor Firefox 3 appear to pay any attention to this setting and use the app's statusbar setting for FF and always show it for IE.

Putting it all together

Here's a couple of examples.

This one would open the URL https://www.electrictoolbox.com/ in a window that's 900px wide by 600px high with scrollbars and allowing the user to resize it:

window.open('https://www.electrictoolbox.com/', '', 'width=900,height=600,resizable,scrollbars')

The next example would do the same as the above, but the user would not be able to resize the window:

window.open('https://www.electrictoolbox.com/', '', 'width=900,height=600,scrollbars')

And finally, if you don't specify the width or height, it's up to the browser to work out how big it's going to make it, which is usually based on the size of the window you are currently using when it was first opened (or something like that...)

window.open('https://www.electrictoolbox.com/', '', 'resizable,scrollbars')

Javascript: The Definitive Guide

I bought my first copy of the O'Reilly "Javascript: The Definitive Guide" back in 1997 (I guess it was the second edition, looking at the printing history inside my current copy) and bought the fourth edition in 2003. It's currently up to the 5th edition and comes highly recommended.

Although I've started using jQuery more recently which takes care of a lot of stuff there's always a lot of regular Javascript to write as well, and it's always good to have a good reference book, as well as using the Internet.

If you were to only buy one Javascript book I'd have to recommend this as the one to get.

 


Related posts:


Comments