Opening New Windows with the window.open() Method

Open A New Window

The Window Object's open() Method

Using the open method of the window object to open new windows gives us control over a new window's properties that we didn't have with HTML.

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

window.open("file.html","myWin","width=300, height=300, top=300, left=500, toolbar=1, menubar=1, location=1, status=1, scrollbars=1, resizable=1")

Properties of open()'s 3rd Parameter

Notice the multiple properties within the 3rd parameter; each property is 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).

Invoking Open()From an Event Handler, Setting HREF Value to File Name

Anytime you invoke the open method from the <a> tag - whether directly or through a function, I recommend doing so from the onclick event handler. Don't invoke it from within the href attribute's quotes. Instead, set the href attribute's value to the page you wish to open in the new window. Then, to ensure the browser will override the HTML link action with the JavaScript action, return false in the onclick event handler following the open() invokation:
<a href="somePage.html" 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 have become accustomed to reading link URLs in the status bar before clicking them. I also have a habit of opening links in new windows manually by using my context menu (viewed by right-clicking on a link), which I can't do when HREF is set to "#" or "void".
2. Setting the href to "#" can cause the opener page to scroll to the top when the link is clicked. This causes a user to lose their place on a long opener page - very annoying.
3. Many search engines such as Google, and site development tools such as Dreamweaver, need to read the value of href to perform certain indexing functions. While it could be used as a handy way to keep your pages from being indexed, you should still consider the need to read a URL in the window status bar.

If you must invoke the open method from the href attribute, you'll want to avoid the [object] opps.

The [object] Oops

The "[object] Oops" is what happens when the opener page is overwritten with the text, "[object]" or "[object window]" as a result of the open() method being directly invoked from the HREF attribute. This occurs because the open method returns an object reference to the browser window. To avoid the [object] oops, use the void operator in front of the method call:
<a href="javascript:void window.open(file,name,props)">...</a>

Reusing and Focusing A Sub Window

Reusing the name property (open() method's 2nd parameter) allows you to load multiple documents into the same window. While no one in their right mind writes a separate function for each new window they want to open, many people repeatedly invoke open() directly from within multiple <a> tags. When doing so, you should avoid opening a zillion different windows by using the same window name in each invocation. Also, you MUST put the new window in front of the opener when it loads the new page using the focus() method.
<a href="FirstPage.html" onclick="popWin = open('FirstPage.html','myWin','width=300,height=300');popWin.focus();return false">

<a href="SecondPage.html" onclick="popWin = open('SecondPage.html','myWin','width=300,height=300');popWin.focus();return false">
Here are a few other handy window methods other than focus, alert and confirm:
window.print()
window.close() //NOTE: if used in an event handler, window reference must be present (instead of just "close()")
window.moveTo(x,y)
window.resizeTo(x,y)

window.close() NOT document.close()

If the close() method is invoked after page has loaded, the "window" reference must be included so as not to invoke the document.close() method which is used to "close the stream" after a write() statement:
<a href="javascript:void" onclick="window.close()">Close the Window</a>
The Opener Property
Using the opener property, a document loaded in a sub window can control its opener window. 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.
opener.print()
opener.location.href
See the lesson on Closing Windows and Confirmation Boxes to learn how to close a main window from a sub window.


 


View Source | Home | Contact