There are so many more important topics to talk about, with a higher level of development, but I’ve often seen ways that I found not optimized with these kinds of links, or at least, perfectible. It made me want to give you a little tip if there is need to add this feature simply. And the explanations that go with it.

In addition, it can be a good exercise for beginners in JavaScript.

The solution

I now give you my proposal. If you need explanations or details, just see below.

return ! open.window(this.href);

Why ?

The choice of ease

The easy way is to add to the tag “<a>” an attribut “target” with the value “_blank”.

<a href="https://tuto.tech" target="_blank">

Everybody started like this. It doesn’t need JavaScript but it is not compliant with XHTML.

The good choise

The best practice is using JavaScript combining :

• Window.open : open a specific URL in a new tab (method documentation of W3Scools)
• return false : block the execution before the href (otherwise, the link would be opened in a new tab and the current one)

So, instinctly, we would add the following attribute in the link :

<a href="https://tuto.tech" onclick="window.open(this.href);return false;">Tuto.Tech</a>

It is possible to move the code in a function :

<script type="text/javascript">
function open_link_1 (tag) {
	window.open(tag.href);
}
</script>
<a href="https://tuto.tech" onclick="open_link_1(this);return false;">Tuto.Tech</a>

<!-- Using the "return false;" of the function -->
<script type="text/javascript">
function open_link_2 (tag) {
	window.open(tag.href);
	return false;
}
</script>
<a href="https://tuto.tech" onclick="return open_link_2(this);">Tuto.Tech</a>

It is also possible to use JQuery :

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('#jquery_link').click(function(){
		window.open($(this).attr('href'));
		return false;
	});
});
</script>
<a href="https://tuto.tech" id="jquery_link">Tuto.Tech</a>

The perfect choise

it really rarely happens (sincerely I have never seen that), but window.open can fail (returning null). In that case, the link being disabled by the “return false;”, it is therefor completely neutralized.

If the JavaScript fails, what you might want is to return to the initial way of functioning of the link. It is therefore very easy to adapt this code according to the return of window.open : by returning the inverse value of the method as follows : return ! open.window(this.href);

<!-- In the tag -->
<a href="https://tuto.tech" onclick="return ! window.open(this.href);">Tuto.Tech (tag)</a><br />

<!-- With a function -->
<script type="text/javascript">
function open_link (tag) {
	return ! window.open(tag.href);
}
</script>
<a href="https://tuto.tech" onclick="return open_link(this);">Tuto.Tech (function)</a><br />

<!-- With JQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('#jquery_link').click(function(){
		return ! window.open($(this).attr('href'));
	});
});
</script>
<a href="https://tuto.tech" id="jquery_link">Tuto.Tech (JQuery)</a>

Honestly

What decided me to write this topic is the installation of a plugin in WordPress: I wanted the links targeting my social accounts to open a new tab. I realized that the plugin used what I call “The good choice”. Not the perfect one.

Now you know everything!