How to open popups
There is a right way to use window.open even if it normally is used in some evil way. I'm not talking about ways to avoid popup blockers here; just ways to keep your code clean, and your site usable.
If you are looking for a complete reference to window.open go away! You might find one here though.
First let's have a look at a common use of window.open (don't copy and paste this. It's EVIL)
<a href="#" onclick="javascript:window.open('path/to/page',pagename)">link title</a>
A few things are wrong here. First the href attribute doesn't serve it's design. It should have the reference to the page being opened by the link. This serves a few purposes; even though you as a developer might want the target opened in a new window; it allows the user to open it in a new tab in firefox (or a new window in IE) by right clicking it. It also allows the link to function in a javascript disabled environment. Lastly it gives some feedback via the browsers status bar when a user mouses over the link (many people [myself included] check that out before clicking on links). Oh and you can "copy links" before clicking on them.
Why the pound sign in the href? It is a lazy way to keep the browser from change the current page even after it opens a new window via the onclick event.
A better way to code this would be:
<a href="path/to/page" onclick="window.open('path/to/page',pagename);return false;">link title</a>
This allows users to open the page how they want it, gives feedback in the status bar; and if they have javascript enabled it opens in a new window; leaving the current page alone (thats the return false; part)
I also see <span> tags with onclick attributes that are styled to look like links. Give me a break; If you want a link. Use a link!
UPDATE 2/23/06 : Kudos to Snook for coming up with a prototype powered popup function. Combined with the techniques above you get some nice usability and clean code. It allows you to do this (assuming you update Popup.open to return false). Another slick simplification is to use this.href instead of re-typing the href in the popup method call.
<a href="path/to/page" onclick="return Popup.open({url:this.href});">link title</a>
UPDATE 3/27/06 : I've added a few features to Snook's popup script to fully reflect all the window.open options here
2 years, 11 months ago
even better:
link title
2 years, 11 months ago
that cvame out weird.
The idea is using this.href in the onclick event so u write the path only once in the href
2 years, 11 months ago
ah, here we are. Tried to post this earlier, maybe I’m lucky now:
You could avoid putting in an onclick-handler into the link altogether, kind of the next logical step to your post.
You do this via DOM-scripting, which is quite easy once you understand the basics. Here’s a nice introduction into DOM and a solution for opening links in a new window (comes in handy for xhtml strict, where the target attribute is not allowed).
http://www.contentwithstyle.co.uk/Articles/6/dom-scripting-or-how-to-keep-the-code-clean/
The script only needs little tweaking to get it to work for your purpose.
1 year, 5 months ago
That “pound sign” is a hash!
1 year, 2 months ago
I want to add an external script to add Webcomic links to a menu. The scrips contains links that would be served best in a new window.
Any ideas?
6 months ago
Thanks so much for your suggestion. I’m relatively new to .html and I have been looking for a good way to create a pop-up that was xhtml compliant, and this did the trick perfectly!