Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make links that open new windows

JavaScript Links

How to make links that open new windows

by  petey  Posted    (Edited  )
Making links that pop up new windows in an accessible and gracefully degrading way is possible with the following method:

Code:
<a href="help.html" onclick="window.open(this.href, '_help', 'status,scrollbars,resizable,width=100,height=100,left=10,top=10,menubar,toolbar'); return false;" target="_help">click here</a>

That's a whopper of a link, so here's what its various components do:

Code:
href="..."
The href attribute is a failsafe. If JavaScript breaks or isn't supported, your link will still work like a normal link. This allows access to users without JavaScript and also allows access by search engine indexers who spider your site.

Code:
onclick="..."
When you click a link that contains an onclick attribute and JavaScript is enabled, JavaScript in the onclick attribute runs before the page designated by the href attribute loads into the current window. If onclick returns false, the href attribute will be skipped. Since we're poping up a new window with JavaScript, we'll place our pop up command in there and then return false, giving the desired effect of a window popping up but no change to the original window.

Code:
window.open(...)
This method does the actual pop up, and is included in the onclick attribute before the "return false" statement. The first of the three parameters to the window.open method, this.href, designates the page that loads into the popped-up window. It is literally this link's href. The second parameter, '_help', designates the html target name for the new window. It corresponds to the target="..." attribute mentioned below. The third parameter accepts a comma-separated string of window attributes, such as whether to include scrollbars or allow resizing. Omit the entire parameter and all the attributes are included. Include the parameter and only the attributes you list will appear.

Code:
target="..."
If for whatever reason the page designated by the href attribute proceeds to load, the target attribute tells the browser to load it into a window by the given name, in this case "_help". (The underscore is just a naming convention.) If no window exists by that name, a new one is launched. In our case, the target attribute makes the non-JavaScript behavior as close as possible to the desired behavior, allowing your web app to degrade gracefully.
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top