1. Technology

How to Open a Link in a New Window: Using JavaScript

Part 3: Use JavaScript to Open a Window

By

Computer Programming
Logovski/iStock Vectors/Getty Images

JavaScript is a useful way to open links in new windows because you control how the window will look and where it will be placed on the screen. There are a lot of options you can modify in your new window with JavaScript:

  • a menubar
  • a toolbar
  • the location bar
  • the directories bar
  • a status line
  • scrollbars
  • allow the window to be resized
  • will the window close when the window that opened it closes
  • width (in pixels)
  • height (in pixels)
  • alignment from the left of the screen
  • alignment from top of the screen

Once you've decided on the options for your window from the above list, you need a few other things to get your script working: the URL to open in the new window and a name for the new window.

For example, I can create a new window to open my home page (http://webdesign.about.com/). I'll call the window “open_window”. It will be 640x480 pixels in dimension, open in the upper left corner of the screen, and have all the same features as a normal window (menubar, toolbar, etc.). This uses the following HTML in the HEAD of my HTML document:

<script language="JavaScript">
  function openNewWindow() {
    popupWin = window.open('http://webdesign.about.com/',
    'open_window',
    'menubar, toolbar, location, directories, status, scrollbars, resizable,
dependent, width=640, height=480, left=0, top=0')
}
</script>

Make sure that the line 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0') is all on one line without any carriage returns in the middle.

Then, I need to add some scripting to the link that will open the new window.

<a href="javascript:openNewWindow();">return to front page</a>

See this popup window in action. And learn more about JavaScript popup windows from the About.com JavaScript website.

First Page > Some Things to Think About Regarding Opening Links in New Windows > Page 1, 2, 3

Current HTML/Web Design Articles

©2014 About.com. All rights reserved.