COM271, Week 9
The Window Object: Opening, closing, and specifying windows
Syllabus | Table of Pages | Assignments | References and Useful Links
The DOM Window Object includes methods to create (open), destroy (close), and to set an array of attributes of new windows. If you want to allow access to a new page without forcing a visitor to leave your site, you may do this by opening a new window for the new page. The new window should include, along with the content, a means to close / destroy the window. You may also set up scroll bars, determine the size and position of the new window, etc.
The general syntax is
window.open(URL,name,specifications,replace)
where the arguments are as follows (from W3Schools Window open() Method):
| Parameter | Description | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| URL | Optional. Specifies the URL of the page to open. If no URL is specified, a new window with about:blank is opened | ||||||||||||||||||||||||||||
| name | Optional. Specifies the target attribute or the name of the window. The following values are supported:
| ||||||||||||||||||||||||||||
| specs | Optional. A comma-separated list of items. The following values are supported:
| ||||||||||||||||||||||||||||
| replace | Optional. Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
|
Note that if a user's browswer has a pop-up killer installed, opening a window may not work.
Open a Window!
A simple window: Here is a link with an event handler to open a new window that will include the Google.com home page: Google this!
Here is the code:
<a onclick="newWindow = window.open('http://www.google.com', 'google','outerHeight=600, outerWidth=800,scrollbars=yes');" href="#">Google this!</a>
No! Close that Window!
Notice that newWindow is the name of an instance of a window object. You may apply the close method if you are finished using the window
<a onclick="newWindow.close>Click to close window</a>
and it's gone!