Html/javascript: Hiding Link Destination And Opening Link In New Tab

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 hove

Solution 1:

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

<adata-href="http://www.google.com/"target="blank"> LINK </a>

Solution 2:

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><adata-href="http://www.google.com/"> LINK </a></div>

Solution 3:

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

varwindow = 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'

Solution 4:

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.

Solution 5:

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';
}