The following tip describes how
you can create a link that will Open in a New Window using JavaScript. There are
three variations shown below. You can use the onClick event or the onMouseOver
event. The brackets [] indicate the optional entries. The JavaScript used is in the
form of:
- onClick = [window].open("URL", "windowName",
["windowOptions"])
- onMouseOver = [window].open("URL", "windowName",
["windowOptions"])
- Create your link like any other link. You can use a Text link or a Graphic link.
- In HTML View edit the link and add one of the following after the <a
href="URL" and before the > in the link.
onClick = [window].open("URL", "windowName",
["windowOptions"]) for an onClick event. onMouseOver =
[window].open("URL", "windowName", ["windowOptions"]) for
an onMouseOver event.
NOTE: In the examples newwindow.htm is this page, and samplewindow.htm
is the page opened in the New Window. You can replace onClick with onMouseOver
to open a new window when the mouse passes over the link.
For a Text Example: New
Window Link in HTML View change the HTML for the link:
From: <a href="newwindow.htm" >New Window Link</a>
To: <a onClick="window.open('newwindow.htm',
'NewTextWindowName','width=375,height=250')">New Window Link</a>
For a Button Example:
in HTML View change the HTML for the link:
From: <a href="newwindow.htm" ><img
src="button.gif" alt="AlternateText Description"</a>
To: <a href="newwindow.htm" onClick="window.open('samplewindow.htm',
'NewButtonWindowName','width=375,height=250')"><img src="button.gif" alt="AlternateText Description" </a>
You can also create a JavaScript Function to open a new
window. This is probably easier if you need to create several new window links.
- Use Insert | Advanced | Script... or the Script icon to open the Script form.
- Select the JavaScript radio button.
- Enter the JavaScript like the following:
function openNewWindow(url) {
window.open(url,"",'width=375,height=250');
}
NOTE: You can change the window options as described above.
- Click OK to close the form.
- Create your Link as normally would.
- In the Hyperlink Properties add javascript:openNewWindow('yourpage.htm').
This is a Text or Button Example: New Window Link or
Window Options
The following are the options available to control the window. Separate each
option with a comma when using multiple options. For example:
"toolbar=yes,resizable=no,width=200,height=300" specifies to add the toolbar,
don not allow resizing, and create the window 200 pixels wide with the height of 300
pixels. The values in brackets [value] are optional. If the option is
specified with no value, then is true (yes or 1). If is not specified, then it is false
(no or 0).
|
Toolbar creates the standard browser
toolbar
toolbar[=yes|no]|[=1|0] |
|
Location creates a Location (URL) entry
field
location[=yes|no]|[=1|0] |
|
Directories creates the standard browser
directory buttons.
directories[=yes|no]|[=1|0] |
|
Status creates the status bar at the bottom
of the window.
status[=yes|no]|[=1|0] |
|
Menubar creates the standard browser menu
at the top of the window.
menubar[=yes|no]|[=1|0] |
|
Scrollbars creates horizontal and vertical
scrollbars when the window contents are exceed the window size..
scrollbars[=yes|no]|[=1|0] |
|
Resizable allows a user to resize the
window.
resizable[=yes|no]|[=1|0] |
|
Width specifies the width of the window in
pixels.
width=pixels |
|
Height specifies the height of the window
in pixels.
height=pixels |
|
Copyhistory copies the browser history used
for the Back and Forward buttons.
copyhistory[=yes|no]|[=1|0] |
|