I want my external links to open in a new tab

[sunawang]

Works perfectly on my blog. Thanks @Aileen

[binaryanomaly]

Could we have this as a feature please?

[JuergenB]

@FallingPanda

<script type="text/javascript">
	var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
    var a = new RegExp('/' + window.location.host + '/');
	links.forEach((link) => {
		if(!a.test(link.href)) {
			link.setAttribute("target","_blank");
		}
	});
</script>

I just wanted to say thanks and 2 things:

1. Thank you for all the people who have contributed here. I have tried and tested many of the above suggestions. However, the previous code snippets listed have an issue on mobile devices, tapping on the hamburger menu opens a blank new tab. So this is not right, only this particular snippet works in that regard.
2. This really should be addressed platform wide, not in a forum. I really think this should be the default or an option without having Ghost customers having to spend hours or days struggling, researching, testing and trying workarounds that are inaccurate. Even this thread did not help until I found this snippet near the bottom.

Why on earth is the Ghost devs so resistant on implementing this as an option?

[LogicallyMystic]

So good - thanks for your help.

[myusuf3]

I wish they would just make this the default or at least tell why not or make it configurable at the link creation time.

[Mahendra_Palecha]

Thanks, bro it works

[matenauta]

@JuergenB

Why on earth is the Ghost devs so resistant on implementing this as an option?

The same applies to Discourse (fantastic piece of software too):

[Reseal4115]

I got this working with the script of @FallingPanda

Is there any way to make Navigation links to open a new tab though? For example secondary navigation.

[Victor_Saavedra]

@FallingPanda

<script type="text/javascript">
	var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
    var a = new RegExp('/' + window.location.host + '/');
	links.forEach((link) => {
		if(!a.test(link.href)) {
			link.setAttribute("target","_blank");
		}
	});
</script>

This help me a lot, thanks!

[The_Jetsetter_Cheap]

If they are external links they will still open in a new window using the code I posted below

<script>
  const anchors = document.querySelectorAll('a');
    
  for (x = 0, l = anchors.length; x < l; x++) {
    const regex = new RegExp('/' + window.location.host + '/');
        
    if (!regex.test(anchors[x].href)) {
      anchors[x].setAttribute('target', '_blank');
      anchors[x].setAttribute('rel', 'noopener');
    }
  }
</script>

[Elba_Sindoni]

@Aileen

<script type="text/javascript">
    var links = document.querySelectorAll('a');
    links.forEach((link) => {
        var a = new RegExp('/' + window.location.host + '/');
        if(!a.test(link.href)) {
          	link.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                window.open(link.href, '_blank');
            });
        }
    });
</script>

---

Works!!! thank you!!!

[Reseal4115]

This works for footer icons but it makes the page links (internal pages of my website) also open in new window. How would I modify this script to only apply to external links in the footer?

[Theodorico_Carvalho]

Unfortunately, this doesn’t work for me either. Is there something I might be missing? Could you please show me exactly which is the code? I know very little HTML

[Cathy_Sarisky]

@Aileen

var links = document.querySelectorAll('a');

The problem is right here:

var links = document.querySelectorAll('a');

That’s targetting every a (link) in the whole page. Instead, figure out what makes those footer links unique. Perhaps they’re inside a container with class footer? If so, change that line to this:

var links = document.querySelectorAll('.footer a');

The . in front of footer means it’s a class. If you have an ID, you’d use # instead. Or if you have a <footer> element (it varies with theme!), do ('footer a')

You’re going to have to inspect your page’s HTML to figure out exactly how to target it, but it’s definitely going to be possible! :)

[eces]

For ghost.io users:

document.querySelectorAll('.gh-content a').forEach( el => el.target = 'moredetail' )

[poeticrecovery]

@eces

electorAll('.gh-content a').forEach( el => el.target = 'moredetail' )

how do i find the html page, how do I access it thanks.

[mactrix]

Thanks. Only 4) worked for me in «source» theme v1.1.2

[cieloazul]

All you need to do is to follow these instructions:

1. Login into your Ghost admin
2. Go to Code Injection under Settings
3. In the Site Header section, you can insert the following code

<base target="_blank"/>

[Cathy_Sarisky]

That code causes all links on the page to open in a new window, including your menu bar, etc. It’s probably not what you want.

I’d recommend this code (previously shared above), added in code injection footer (or integrated into the theme so that it runs /after/ the page loads).

<script type="text/javascript">
	var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
    var a = new RegExp('/' + window.location.host + '/');
	links.forEach((link) => {
		if(!a.test(link.href)) {
			link.setAttribute("target","_blank");
		}
	});
</script>

The code above assumes that your article content is what you want to change the links on, and that your article content is within an tag. Some themes use a ‘main’ tag instead, so you could switch that. Or if your theme just has content in divs but the main div that holds the post content is named “foo”, you’d change that line to:

	var links = document.querySelector('.foo').querySelectorAll('a');

The point here is that you’re looking to target the links in the main body of the post, while not messing with the navigational links, footer links, etc.