JavaScript: Open New Window

Using JavaScript to open a new window gives you more options and more control over the new window than HTML. The HTML code to open a new window is simple and straight forward. If you just need to open a new window with no special options then use this HTML code:

HTML Code to Open a New Window

<a href="example.html" target="_blank">example link text</a>

If you are new to JavaScript please see: A JavaScript Tutorial for Beginners.

JavaScript Code to Open a New Window

Example of using JavaScript to open a new window:

• Copy and paste the code below into the body of any HTML page.
• Save the page and open it in a browser.
• Click the 'Open' link to see it work.

<script type="text/javascript"> <!-- // New window script var newWindow; function openNewWindow(url) { newWindow=window.open(url,'windowName','height=500,width=800, left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes'); if (window.focus) {newWindow.focus()} } // --> </script> <p><a href="javascript:openNewWindow('http://www.website-building-for-beginners.com/');">Open</a></p>

By the way… you are free to use the above script anyway you want. Here's how it works:

The Link Used to Open a New Window:

<a href="javascript:openNewWindow('http://www.website- building-for-beginners.com/');">Open</a>

When you click the 'Open' link, the url (http://www.website-building-for-beginners.com/) gets passed to the function 'openNewWindow' in the JavaScript.

Main Line of Code in the Function:

newWindow=window.open(url,'windowName','height=500,width=800, left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');

newWindow: is a variable that gets created with all the properties of the new window stuffed in it. In more advanced JavaScript you can use this variable (newWindow) to modify the window "on the fly". Don't worry about that now.

window.open(): is pre-defined functionality in the JavaScript language for anyone to use. This is what actually opens the window.

Attributes that Define the New Window

url: the variable that receives the url that is specified the link code (http://www.website-building-for-beginners.com/).

windowName: name of the window created. Can be used for more advanced things like opening a different page in the window.

height: the height of the window in pixels.

width: the width of the window in pixels.

left: the distance (in pixels) from the left edge of your screen to where the new window is displayed.

top: the distance (in pixels) from the top edge of your screen to where the new window is displayed.

resizable: either yes or no. If you say yes then the user will be able to resize the new window by clicking the edge of the window and dragging.

scrollbars: either yes or no. If you say yes the window will have scrollbars when needed. If you say no scrollbars will never show.

toolbar: either yes or no. If you say yes the basic 'Back and Forward' toolbar will show.

status: either yes or no. If you say yes the status bar will show.

Using JavaScript to open a new window gives you more options and more control over the new window than HTML. For more information about using JavaScript to open a new window see this: JavaScript: Open New Window.