How to Open a New Window In Javascript


Javascript



In this article, we show how to open a create and open up a new window in javascript using the open() function.

The open() function is a function which allows a user to open a new window with Javasript.

Using this method, we can make a new window pop-up and be redirected to any URL we want. We can also determine the size of the window we create by specifying this in the parameters.

Below we create a variety of new windows with different parameters.


Opening a New Window

Again, we use the Javascript open() function to create a new window with Javascript.

The most simple format to open up a new window with Javascript is simply to specify the URL that this window will direct to, using the line:

window.open("URL");

where URL is the URL where you would like to redirect the user to.

Example

This line above will open up a new window and be directed to the URL specified, http://www.dropbox.com.

We can attach this to a new button, using the following code:



This code above will create a button and will open up a new window to dropbox's website when a user clicks on it.

This button is shown below. Click on it to see the effect of the above code:

This is the most basic way of using the window.open() function, where the only parameter you specify is the URL that you want the new window to direct to.


Open New Window of Specified Height and Width

Above is the most basic way of using the Javascript window.open() function. However, we can also specify additional parameters, in which we can choose the size which the new window opens to, both the height and the width.

Thus, the new window doesn't have to be a full-size window. We can specify any height or width we want it to be.

If you press the button below, the window will open up with a width of 200 and a height of 200:

If you press the button below, the window will open up with a width of 600 and a height of 400:



Thus, you can see that you can choose the size dimensions that a new window will open with.


Code

In order to specify height and width dimensions of a new window, the format to follow to do so are:

window.open(URL, name, 'width=value, height=value');

The URL is the URL which the window will open up to. Name is the name of the new window which will be opened. Normally this field is kept blank. When kept blank, the URL will be the name that appears in the title bar of the new window. The width and height attributes specify the heigth and the width of the new window object.

So to create a new window that opens to the home page of http://google.com with a height of 600 and a width of 800, we use the code:



If placed in a button with an onclick event handler, the code would be:



This creates the following below:




Open a Window With No URL

It's also possible to open a blank web page, a web page which directs to no URL, if this is what is desired.

For example, you can open up to a blank page which maybe just displays a message on it, such as "This is My Web Page."

Click the button below to see what is meant by this:



To create this, we create the button with an onclick event handler:



This button calls the openwindow() function when clicked on.

The Javascript code for this openwindow() function is:



In this Javascript code, we create a variable called newwindow which calls the function to open up a blank web page of width and height of 300 and stores the value and parameters of this window. Then we use this window object and write the line, "This is My Web Page" to it using the document.write() function.

So above are various ways of opening new windows with different parameters in Javascript.

HTML Comment Box is loading comments...