5

There are instances where I have to open links in a new window/tab. Is there a method of doing so that is valid for strict HTML? Using jQuery to do so would be acceptable, but I'd rather not just sneak the target="_blank"s back in w/ jQuery so that validators won't see them.

Ates Goral
  • 137,716
  • 26
  • 137
  • 190
aslum
  • 11,774
  • 16
  • 49
  • 70
  • 5
    Here's a handy flowchart to help you know when to use target="_blank": http://t.co/gfKZiXt – jerone May 11 '11 at 18:02
  • @jerone: That's pretty funny, but not actually helpful. – aslum May 11 '11 at 18:05
  • I'm sorry, just got this tweet today. Ontopic: don't know of any valid method for this; jQuery seems the best alternative. – jerone May 11 '11 at 18:10
  • The sanest things I've seen involve setting `rel="external"` and using JavaScript to enforce it. But why don't you want to use `target`? Are you using the XHTML Strict doctype? Because if you're using HTML5, `target` is actually valid. – sdleihssirhc May 11 '11 at 18:14
  • @jerone: No need to apologize... it *was* funny. @sdleihssirhc: I hadn't realized it had become un-depreciated... unfortunately I think our user base may still be a bit too entrenched in IE7 to use HTML5 yet. – aslum May 11 '11 at 18:32

2 Answers2

6

Since you said jQuery is allowed. 

<a href="http://mysite.com" class="newWindow">Open in new window</a>

$('a.newWindow').click(function(e){
   e.preventDefault();
   window.open(this.href);
});

You could also do this via normal JS. This way your HTML won't have onclick peppered all over the place.

EDIT - Updated to use e.preventDefault() as per Ian's suggestion.

JohnP
  • 49,507
  • 13
  • 108
  • 140
  • 4
    `each` -> `click`? `return false` -> `e.preventDefault()`? – Ates Goral May 11 '11 at 18:07
  • Also `'` -> `"` for the sake of proper HTML. – Ates Goral May 11 '11 at 18:10
  • 1
    I think you mean $('a.newWindow').click(...) – Abdullah Jibaly May 11 '11 at 18:11
  • @ates @Abdullah fixed! thanks guys, it's the tailend of a _really_ long day :) `return false` prevents default and stops propagation so it works well – JohnP May 11 '11 at 18:15
  • @JohnP http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false - IMHO using return false is generally not the right thing to do. But depends on the circumstances. – Ian Grainger Sep 27 '13 at 10:19
  • @IanGrainger yup, you're right. Using `preventDefault` would just make things more consistent as the behavior of your function is predictable. I've updated the answer, thanks. – JohnP Sep 27 '13 at 11:13
2

This works: <a href="test.html" onclick="window.open(this.href); return false; ">click me</a>

However, the onclick attribute to attach event handlers is generally unmaintainable. The appropriate way to go about attaching the event handler depends on your javascript framework. selector.click(function) is appropriate in jQuery.

sapht
  • 2,789
  • 18
  • 16
  • 3
    Please don't use (and recommend the use of) event handlers in attribute values. – Ates Goral May 11 '11 at 18:08
  • Deciding on an approach to event handlers is a completely seperate subject. The author's concern is regarding `window.open`. – sapht May 11 '11 at 18:11
  • 2
    When providing answers to a novice, the responsible thing to do is to be pedantic about the content of the answer. If there's a better way, you should show it. – Ates Goral May 11 '11 at 18:18
  • You're right. I now attempt to make the situation more clear in my answer. – sapht May 11 '11 at 18:21
  • I wouldn't say I'm a novice... now I know enough to get myself into **real** trouble. – aslum May 11 '11 at 18:34
  • 1
    With Ates on this one. Not even helping a novice, just helping anyone in general you should give them _up to date_ code. JS inline has been outdated for a _long_ time. It'd be like if someone asked how to make text move left and right for a scroller and you gave them a `` tag as a suggestion ;) – Oscar Godson May 11 '11 at 18:41
  • You make a fair point -- however, `onclick` is a stylistic error, while `` is actually deprecated. My answer was penned with an `onclick` handler simply because it takes less time to write and read. – sapht May 11 '11 at 18:53