Best Practice for JS - window.open() in href or in onclick?

Question

Just a question about optimization, between :

<a href="#" onClick="javascript:window.open('myUrl.com');">link-1</a>

and :

<a href="javascript:window.open('myUrlBis.com');">link-2</a>

Is one better than the other ? Or more compatible ? Thanks.

Not really a duplicate of [Onclick or href which is best for opening an link in button](http://stackoverflow.com/questions/10765363/onclick-or-href-which-is-best-for-opening-an-link-in-button) ;) — 4wk_, Jun 12 '12 at 16:39
Neither is preferred. You should look into JavaScript event binding, and listen for the click on the link. — Greg Pettit, Jun 12 '12 at 16:39

score 17 · Accepted Answer · answered Jun 12 '12 at 16:40

17

Best practice is to use the target attribute:

<a href="http://myUrl.com" target="_blank">link-1</a>

If that doesn't suit, a click handler (ideally not assigned via attribute) would be my take.

answered Jun 12 '12 at 16:40

T.J. Crowder

1,031,962
187
1,923
1,875

Why is this the better practise? – dwjohnston Jul 09 '20 at 03:18
@dwjohnston - It's semantic, so the browser (/screen reader, etc.) can indicate what's going to happen, and no JavaScript is required. – T.J. Crowder Jul 09 '20 at 06:48

score 3 · Answer 2 · answered Jun 12 '12 at 16:42

Neither one

Make it a regular link using href and target

<a id='my-link' target="_blank" href="http://myUrlBis.com">link-2</a>

If you need to do some processing of the click with JavaScript, you can use the following

document.getElementById("my-link").onclick = function(e) {
  // Do some processing here, maybe 
  window.location = this.href
  // Return false to prevent the default action if you did redirect with script
  return false;
}

score 0 · Answer 3 · answered Jun 12 '12 at 16:47

No JavaScript

<a target="_blank" href="myUrlBis.com">link</a>

With JavaScript

<a target="_blank" href="http://www.example.com" id="myLink">link</a>
<script>
    document.getElementById("myLink").onclick = function(){ //attach click event to link
        var winPop = window.open(this.href);  //`this` is reference to link, get href
        return false;  //prevent click event from clicking the link
    }
</script>

JSFiddle Example

score -1 · Answer 4 · answered Dec 08 '15 at 11:05

Below code should be fine.

<a href="javascript:void(0);"  onclick="window.open(url)">

Found issue in IE (version:11) with below code

<a onclick="javascript:window.open(url)">

Problem: The parent window is getting refreshed in IE when we have javascript window.open code in href attribute.

Best Practice for JS - window.open() in href or in onclick?

4 Answers4

Linked