WDN Logo

home-icon Home / JavaScript / Creating or Opening New Windows (pop-up) in JavaScript

Creating or Opening New Windows (pop-up) in JavaScript

Creating or Opening New Windows (pop-up) in JavaScript

If you completed the assignments in the previous session you know how to open new windows. Like the alert() method, the open() also takes arguments. When used without any arguments, the new window displayed is blank. Here I tell you how to embellish this new window.

<A HREF="javascript:void(0)"
onclick="window.open('welcome.html')">
Open a new window</A>

Open a new window

This opens a new window with welcome.html page.

Sponsored Links

The arguments of JavaScript open()

The open() method takes four arguments:

window.open('URL', 'NAME', 'FEATURES', 'REPLACE')

We have already seen that if we provide the URL of a document through the first argument, it will be loaded in the new window.

NAME: specifies a name for the new window that can then be used as value for the TARGET attribute of <A> tags.

FEATURES: let you define properties of the window such as width, height, presence or absence of scrollbars, location bar, status bar etc. The list of features is quite daunting so we shall go over them gradually.

REPLACE: takes a boolean value… we won’t bother ourselves with this argument!

<A HREF="javascript:void(0)"
onclick="window.open('welcome.html','welcome')">
Open a new window</A>

Open a new window

List of important features

  • height: Specifies height of the window in pixels.
  • width: width of the new window in pixels
  • location: determines the presence of the location bar
  • menubar: menubar
  • scrollbars: scrollbars
  • status: status bar
  • toolbar: toolbar
  • directories: specifies the display of link buttons
  • resizable: determines whether the window can be resized. If it’s absent or its value is set ‘no’, the window does not have resize handles around its border.
  • fullscreen: Specific to the Internet Explorer, it determines whether the window is displayed in the full screen mode.
<A HREF="javascript:void(0)"
onclick="window.open('welcome.html',
'welcome','width=300,height=200')">
Open a new window</A>

Open a new window

This opens a new window 300 pixels in width and 200 pixels in height. Pay close attention to how the features are written. The two features (width and height) are enclosed by a pair of quotes without any spaces and there are no quotes surrounding the values.

Did you notice something in the new window?
It didn’t have any scrollbars, location bar, status bar, menubar, toolbar or buttons!
We’ve already seen that the features argument is optional and consists of a comma separated list of features. If this argument is omitted, the new window has all features present in it. However, if at least one feature is present, the JavaScript interpreter will consider only the ones that appear ignoring the features that are absent.

The width and the height take a number (pixels) as value, for other features the value is either a yes or no.

<A HREF="javascript:void(0)"
onclick="window.open('welcome.html',
'welcome','width=300,height=200,menubar=yes,status=yes')">
Open a new window</A>

Open a new window

This window has the menu and the status bars. The others are absent since we didn’t specify them.

<A HREF="javascript:void(0)"
onclick="window.open('welcome.html',
'welcome','width=300,height=200,menubar=yes,status=yes,
location=yes,toolbar=yes,scrollbars=yes')">
Open a new window</A>

Open a new window

Our event handler script is becoming unmanageable… it’s too long. In the next session we look at JavaScript functions and how they can contain blocks of code that can be used again and again.

But before that, here is a small novelty for Internet Explorer users.
The fullscreen feature is specific to this browser and displays the document on the entire screen. A neat effect… sort of! Click on the F11 to remove the full screen display.

<A HREF="javascript:void(0)"
onclick="window.open('welcome2.html',
'welcome','fullscreen=yes,scrollbars=yes')">
Open a full screen window</A>

Open a full screen window

Sponsored Links

Search

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sometimes i just need a break

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Ray Tomlinson, the inventor of the email system, did not invent the @ sign. It had been in existence for hundreds of years. He just used it in an email address and made it popular once again. [more...]

Share on Whats app Share on Facebook Share on Twitter Share on Google plus