1

I am using the following javascript (provided by m59 in this previous answer) to hide the destination of a link which usually shows up at the bottom of the browser window when hovering over a link:

<div>
    <a data-href="http://www.google.com/"> LINK </a>

    <script type="text/javascript">
        var anchors = document.querySelectorAll('a[data-href]');

        for (var i=0; i<anchors.length; ++i) {
          var anchor = anchors[i];
          var href = anchor.getAttribute('data-href');
          anchor.addEventListener('click', function() {
            window.location = href;
          });
        }
    </script>
</div>

This works perfectly fine, but I would like the link to open in a new tab as well. How do I have to change the script in order to do so?

I tried using window.open('href','_blank'); instead of window.location = href; which did not work.

JoSch
  • 869
  • 1
  • 15
  • 35

5 Answers5

1

Unless im missing something, the most obvious thing to do is add a target to that anchor:

<a data-href="http://www.google.com/" target="blank"> LINK </a>
Alex
  • 8,875
  • 2
  • 27
  • 44
0

This is how to do it (try it on your code, stackoverflow blocks new tabs and links)

var anchors = document.querySelectorAll('a[data-href]');

        for (var i=0; i<anchors.length; ++i) {
          var anchor = anchors[i];
          var href = anchor.getAttribute('data-href');
          anchor.addEventListener('click', function() {
            window.open(href,'','');
          });
        }
<div>
    <a data-href="http://www.google.com/"> LINK </a>

</div>
Marco Salerno
  • 5,131
  • 2
  • 12
  • 32
0

You can see here, that syntax of window.open is:

var window = window.open(url, windowName, [windowFeatures]);

So to open link in new tab you should use something like:

var myNewTab = window.open(url, '_blank');

It will not work if you window is opened as '_blank'

Oleg Imanilov
  • 2,591
  • 1
  • 13
  • 26
0

Did you try window.open(href)?

i.e. In your example, href is a string (there are single quotes around it) as opposed to a variable.

Daniel Yefet
  • 81
  • 1
  • 4
-1

Why not just use an onclick event handler to redirect the user?

<a href="" onclick="onClick">link</a>

function onClick(e) {
  e.preventDefault();
  document.location.href='www.google.ca';
}
Rob Brander
  • 3,702
  • 1
  • 20
  • 33
  • The problem is not the `addEventListener`, but the `document.location = ...` because that wouldn't open the link in a new tab, and this problem is not solved by your answer. And using inline event listeners is something you should never do. – t.niese Aug 14 '17 at 15:01
  • You're right, I forgot the part about opening a new tab. I would like to know more about what you call "inline event listener", and why they're a bad practice. Could you provide me with a link to a document that explains these things? @t.niese – Rob Brander Aug 15 '17 at 13:44
  • I don't have a link right now. In general you should always keep css, html and js seperated for maintain reasons. In larger js projects you might want to use linting tools that check for unused functions and variables, and you might want to apply minification and optimizations scripts. Code that is inside of html tags is not seen by those scripts so a linter would not see that this function is used and a minification script might break your code because it shortens the function name. Functions called from html tags need to be visible in the global scope which could result in conflicts too. – t.niese Aug 15 '17 at 14:12