My links are javascript functions which show a loader, then navigate to the target link:

<script>
function go(url) {
  document.body.innerHTML = "some loader html";
  window.location = url;
}
</script>
<a href="javascript:go('test.php');">Click here</a>  

However this link wouldn't work when the user right clicks it and wants to navigate to test.php in a new tab.

I want the link also to function when the user wants to open it in a new tab/window. Is there a javascript/jquery way I can achieve this?

Thanks

My links are javascript functions which show a loader, then navigate to the target link:

<script>
function go(url) {
  document.body.innerHTML = "some loader html";
  window.location = url;
}
</script>
<a href="javascript:go('test.php');">Click here</a>  

However this link wouldn't work when the user right clicks it and wants to navigate to test.php in a new tab.

I want the link also to function when the user wants to open it in a new tab/window. Is there a javascript/jquery way I can achieve this?

Thanks

• javascript
• jquery
• html

• i think in that case it has to be done in the test.php file. stackoverflow./questions/1853662/… – Vishnu Commented Apr 23, 2019 at 18:40

2 Answers 2

Your links should be links, not JavaScript functions. Their primary purpose is navigation. You can add the extra behavior later, in a click handler:

document.body.addEventListener('click', evt => {
  const link = evt.target.closest('a.use-loader');
  if (!link) return;
  evt.preventDefault();
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = link.href;
});

<a href="https://example." class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example" class="use-loader">This one, too.</a>

Or with jQuery:

$('body').on('click', 'a.use-loader', function () {
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = $(this).attr('href');
  return false;
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example." class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example" class="use-loader">This one, too.</a>

This way, the links still work for any agent that isn't running JavaScript, including browsers opening new tabs and users running NoScript.

Firstly, "My links are javascript functions which show a loader, then navigate to the target link" sounds like bad design decision.

To answer your question... window.open('test.php', '_blank');

the second parameter will be the name of the target window see How to simulate target="_blank" in JavaScript

The only way to get a right click 'open in a new window' is to have your tag like this

<a href="javascript:go('test.php');" target="_blank">Click here</a>

I highly remend that you do not open the link using javascript, this is usally bad practice and you will most likely run into popup blocker issues. I would do this personally

<a href="test" target="_blank">Click here</a>

Maybe this "loader" you want to show is supposed to imitate an AJAX loading approach where you load new HTML and insert it into your page without causing an actual page reload

you might be interested in this How do I load the ajax data into a div with jquery?