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
Invoking Open()From an Event Handler, Setting HREF Value to File Name
<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:
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.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:
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.
See the lesson on Closing Windows and Confirmation Boxes to learn how to close a main window from a sub window.