1. Martin S. at 6:26pm on January 24, 2007

If you really do want to open new windows, shouldn't you consider using another doctype, for instance a transitional one, which does not require you to not open external links with the target attribute?

Nice code anyway. :)

2. Jesse Skinner at 7:07pm on January 24, 2007

Sure, you could use XHTML 1.0 Transitional. But if you want to use XHTML 1.1 and have links open in a new window, you're stuck using JavaScript to do this.

3. trovster at 7:52pm on January 24, 2007

This is exactly the same solution which was posted in a sitepoint article titled New-Window Links in a Standards-Compliant World. Although, instead of using a class name, it uses the more semantic rel attribute.

4. Jason Barnabe at 9:48pm on January 24, 2007

The most correct answer is "don't open a new window". Opening new windows is bad for usability because it breaks the normal behaviour of web pages (for example, back buttons). If the user wants a link opened in a new window, the user knows how to do it themselves.

The second most correct answer is "don't use XHTML 1.1". Any benefits received from using XHTML are offset by the fact that the page won't work for 80% of users out there.

The third most correct answer is "use the target attribute anyway". I don't think any browsers out there will ignore the target attribute just because you claim to use XHTML 1.1 in the DOCTYPE. If you're already sending XHTML as text/html for IE users, what's wrong with another non-standard "compromise"?

I would say that using the script provided is fine as a fourth-best solution, but if you MUST open a new window, and you're standards-crazed enough that your site MUST be valid XHTML 1.1, why aren't you standards-crazed enough to reject the usage of non-standard ECMA script like window.onload, element.onclick, and window.open?

5. Jesse Skinner at 10:25pm on January 24, 2007

"why aren't you standards-crazed enough to reject the usage of non-standard ECMA script like window.onload, element.onclick, and window.open?"

I try to write code that people can easily copy and paste, and I want to keep the examples relatively simple. I always recommend people use addEvent instead of onclick, and addDOMLoadEvent instead of window.onload. Those who already know this will understand to use these, and those who don't won't be hurt by using old school JavaScript (until they wonder why their other window.onload function stopped working, I suppose).

That's why I give the jQuery example as well, so there's at least one "proper" example ;)

6. Jason Barnabe at 11:56pm on January 24, 2007

You chopped up my question. I wasn't asking "why are you using non-standard ECMA Script?". I was asking "Why are you using non-standard ECMA Script to avoid using non-standard HTML?" Even your jQuery example is non-standard with window.open, not to mention whatever jQuery itself does.

Reworded: given the choice between simply defining the non-standard target attribute in the HTML or writing a more complex, non-standard script which also has all the disadvantages scripting brings to the table, why would you choose the script?

7. Jesse Skinner at 12:20am on January 25, 2007

I didn't mean to take your quote out of context, I just wanted to address why I use 'window.onload' in examples even though I'd never use it myself.

I agree with you that it's better to rely on a non-scripting solution, and that XHTML 1.1 isn't appropriate to use yet.. but maybe one day this blog post will be relevant.

8. Jason Barnabe at 4:11pm on January 25, 2007

"but maybe one day this blog post will be relevant."

Maybe, but maybe the target property of CSS 3 will gain support before XHTML 1.1 does.
http://www.w3.org/TR/css3-hyperlinks/#target0

9. Jonathan Edmonds at 6:08am on January 27, 2007

Here goes, this is my first ever source code question so bare with me.  I'm trying to embed my delicious links in a Joomla! wrapper.  Delicious gave me this...

<script type="text/javascript" src="http://del.icio.us/feeds/js/jexzer?title=my%20del.icio.us;icon;name;showadd"></script>
<noscript><a href="http://del.icio.us/jexzer">my del.icio.us</a></noscript>

It works great but the links open in the same window which don't fit inside my Joomla! site.  I want them to open in new windows.  I tried your code in every way I could think of and couldn't get it to work.  I very new at this and would appreciate some help.  Thanks.

10. Jesse Skinner at 7:31am on January 27, 2007

@Jonathan - the class name for delicious links is 'delicious-link', so you'd need to use that instead of 'new-window'.

If you already tried that, perhaps the problem is the script is being loaded too soon. Try adding it in a timeout to give some time for the delicious script to run, like so:

window.onload = function(){
    setTimeout(function(){
        // code above that changes the delicious links
    }, 5000);
};

You could also try the approach of using setInterval to check the page every second until the links you want show up, then attaching the events and clearing the Interval.

11. Jonathan Edmonds at 8:20am on January 27, 2007

You Rock.  How did you know that 'delicious-link' was the class name?

Many thanks,
-JE

12. Terry at 9:38pm on February 1, 2007

This code was created by someone else...not trying to bust your balls here or anything.  At least give credit where credit is due:

http://www.456bereastreet.com/archive/200610/opening_new_windows_with_javascript_version_12/

13. Jesse Skinner at 9:48pm on February 1, 2007

@Terry - Obviously I didn't copy Roger's script, just wrote my own code to accomplish the same thing. Actually, I've never seen Roger's solution until now. But his is also nice (albeit much more complex).

14. Terry at 5:49pm on February 2, 2007

You are correct...and like I said, I wasn't trying to bust your balls on this.  If you look at other versions and other people's customizations...they all derived from his code (just like all versions he published pre 1.2 or which ever version it's on.)

When I saw your code...and logic...the first thing that came to mind was his code.  You may very well have written it all on your own, but it's similar enough that I wasn't the only one that noticed.

Side note: I do enjoy your site and use it when I find useful information.  Keep it up!

15. H5N1 at 10:45am on February 7, 2007

You inserted some text in "blockquote" TAG so this page is not valid XHTML:

Error  Line 36 column 12: character data is not allowed here.

<blockquote>In XHTML 1.1 we cannot use attribute...

16. Ray at 12:14am on February 8, 2007

..."solution, and that XHTML 1.1 isn't appropriate to use yet.."

Can you guys please elaborate??

Thanks!  :)

17. Martin Kliehm at 10:56am on February 28, 2007

There are yet more ways to use the target attribute in XHTML 1.1, without script and totally standard conforming. After all, XHTML is extensible! http://learningtheworld.eu/2007/xhtml-with-target/

18. ricardo prado at 9:51pm on March 10, 2007

it wont be more simple:

<a href="http://www.blablabla.br"
          onclick="this.target='_blank'">

19. mike at 11:26pm on March 14, 2007

Yes it will:
<a href="http://www.blablabla.br"
          onclick="target='_blank';">

20. VARA at 9:54am on July 10, 2007

If the user viewing the page has javascript disabled, then the hole thing doesn't work.
So, I think, javascript is not the solution to the <target="blank"> validation problem with XHTML strict 1.1
In other words, let's hope that W3C gives a solution in the future...

21. Michalis at 8:25pm on August 31, 2007

Comment 19 works perfect.

22. I Bap at 3:20pm on September 25, 2007

onclick="this.target='_blank'"

This works with xhtml 1.1 and is valid for http://www.w3.org.

Thank You

23. old timer at 9:00pm on October 25, 2007

Just another reason why I stick to nothing newer than HTML 4 with JS and CSS as needed.

24. Adam at 12:58am on November 17, 2007

After reading this post the code is slick for jquery.
Here is a mod:
//get the click to open popup
$(document).ready(function() {
$('a[rel*=link]').click(function(){       window.open(this.href);
        return false;
    });
});

Anyway this will open up a new window based on the 'rel' attribute. Web semantic as it should be.
For the rest of you whining about XHTML.
Get with the program.
If I was hiring you and looked at your code (especially old timer guy) I would not hire you.
Maybe go back to Frontpage.

Wicked post.
Jquery rules!

25. fedmich at 7:30am on February 17, 2008

Nice code. Jquery rocks.

I was about to apply that trick to my portfolio page,  http://www.fedmich.com/works/  but in the end I just simply changed doctype, its much easier that way

Cheers to all :)

26. kiflea1 at 11:31pm on June 2, 2008

I agree with Jason Barnabe. Don't use a new window.

The standards way of opening up a popup window is to use a floating div.

Jason
"Any benefits received from using XHTML are offset by the fact that the page won't work for 80% of users out there.
"
Jason, I disagree with you on that. Most browsers support xhtml.

27. adam at 11:14pm on June 3, 2008

I find it funny that someone would say not to use a new window and use a floating div instead.
What happens if it is an offsite link?
Do you want your clients site users going to other sites and not returning?

Bringing standards into this is a poor excuse.

Add a Comment