INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

JavaScript Links

How to make links that open new windows by petey
Posted: 27 Mar 01 (Edited 9 Apr 04)

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 &quot;return false&quot; 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=&quot;...&quot; 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 &quot;_help&quot;. (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.

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close