Open A New Window

Using the open method of the window object to open new windows gives us a lot more control over a new window's properties than we had with HTML.

The open method takes 3 parameters:
the URL of the document to be loaded into the new window,
the window's name (don't confuse with file name),
and the window's properties. Each parameter is quoted and separated by commas.

Within the 3rd parameter, each property is also separated by commas. The default value for each property such as scrollbars, toolbar and menubar is zero, or false. So if you don't want your window to have a property, it is not neccessary to declare it with a false value, just leave it out. If you leave out width and height, the new window will have the same width and height as the window that launched the new window (known to JavaScript as opener).

window.open("file.php","myWin","width=300,height=300,top=300,left=500,toolbar=1,menubar=1,location=1,status=1,scrollbars=1,resizable=1")
When calling a new window function, or using inline code for that matter, from the <a> tag, you should set the href's value to the page name, just as you would if you were creating a regular link. Then to keep the link from behaving as a regular link, use the onclick event handler to return a false value to the browser immediately following the new window code:

<a href="somePage.php" onclick="popUp(); return false">click here</a>

I recommend coding pop ups like this for a few reasons:
1. when a user places their mouse over a link, they can see the URL in the status bar. May not sound like a big deal, but many people, myself included, have become accustomed to reading link URLs in the status bar before clicking them.
2. I also have a habit of right-clicking my links in order to open them in a new window. I guess I just like to keep my place. If the href were set to "void(0)" or "#", I would be unable to open the link in a new window. Also, setting the href to "#" can cause the page to scroll to the top when a user clicks the link, which can cause them to lose their place on a long page. This can be very annoying to a user.
3. Many search engines such as Google, and site development tools such as Dreamweaver need to read the value of href to perform certain functions. Google follows the value of href in order to index pages, and Dreamweaver needs to read those values to perform some indexing function as well. While it could used as a handy way to keep your pages from being indexed, you should still consider using the status property to display the URL in the status bar.

Another common mistake is made when invoking the window.open() method inline from the value of href, following the JavaScript URL:

<a href="javascript:window.open(file,name,props)">...</a>

Since the open method returns a window object representing the newly created window, the entire contents of the opener is overwritten with the object reference. To avoid that error, use the void operator in front of the method call. Otherwise, just code the pop ups as I recommend.

<a href="javascript:void window.open(file,name,props)">...</a>

Using the name property in a new window function or within inline code allows you to load multiple documents into the same window. This avoids opening a zillion different windows. Just remember to focus the pop up window to keep it from getting lost behind the opener window.

function popUp(){
popWin = open("somePage.php","myWin","width=300,height=300,resizable=1")
popWin.focus() // brings the new window to the front
}

While we're at it, a few handy window methods other than alert and confirm are:

window.print()
window.close() //if used in an event handler, window reference must be present instead of just close()
window.moveTo(x,y)
window.resizeTo(x,y)

Opener
The document loaded into the new window has control over the window that launched it via the opener property. Using the opener property in front of the usual window properties and methods allows you to manipulate the opener just as you would manipulate a window from inside itself.

close View the Source