I want my external links to open in a new tab

Hi @GTS, I think you’d also need to add attributes to the link ( ?xgtab& is the example) as per @jeff’s earlier post - see I want my external links to open in a new tab - #3 by jeff

1 Like

I was successfully using this non-jQuery code snippet injected in the Ghost site footer:

<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>

This doesn’t name the tab, but checks if the URL is external and only then opens in a new tab.

17 Likes

Unsuccessfully tried all variations of these snippets to little or no effect.

This really should be an option in the settings, and things such as “but it’s so easy in JS…” is only true if you know JS, or you are fine with adding more scripting into your website.

Ghost needs to become less about writing scripts and more about writing, and options such as this will help remove the barrier to entry. I manage to stumble my way through most things, but this has been bugging me for a while.

This code finally worked for me

<script>
  $(document).ready(function() { 
	$("a[href^='http']").attr("target","_blank");
  });
</script>

No ideas why others didn’t. I am eternally grateful to the post in this forum though… they usually save me some pain!

I had a typo in my code snippet. If you try it again, it should work and only open external links in a new tab, but not internal ones.

Your snippet requires jQuery, which is not something everyone wants to use.

1 Like

I know how to do it. But I find it difficult to explain it here. It is a lot of writing. It would be better if I could talk to you. And you will immediately try to make amendments. What time zone are you in? I am from Canada, Canada Population (2023) - Population Stat, but I am available to talk round the clock. Call me if you do not find any other solution. I will help with pleasure.

This is excellent, but I just noticed that clicking on the avatar image at the top right, opens another tab instead of opening the dropdown menu.

It also happens by clicking on the choice of the stripe plan, it opens a new tab.

Any ideas to fix it?

EDIT
this seems to work, if it can be optimized, I would like to know

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

Hi everyone, I’ve been trying to follow along with the ideas above. But I’m still having some trouble. I’m mainly wondering about links within blog posts. I’ve been using bookmarks and external links… with this script work for those too?

Thanks for any help

1 Like

They should work for bookmark links, where are you encountering problems? Can you share the code you’re using? :blush:

1 Like

Thanks for the reply, I forgot to come back and say I figured it out. I got that script from just above to work in the end :ok_hand:

1 Like

Impressive codes this is what i am looking for for the past 2years haha. thank you so much!

1 Like

How do you create a single named tab? So I can use this to open external links in new tabs. Help would be greatly appreciated

If you’re looking for a simple target="_blank" functionality, I’ve been using it for quite a while now.
What below codes does, is check the hostname you’re linking to, compare it to the hostname of your blog. If they don’t match it adds target="_blank" to that link. Links within your domain are left alone.

$(function() {
	// add target="_blank" to all non-internal text links
	$('.post-full-content a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
	}).attr('target', '_blank');
});

It’s a slightly different approach from the accepted answer, but I hope that helps someone.

5 Likes

Thank you, is this something that will work in the code injection part of my ghost site?

Thank you! This worked! I am not familiar with code but I just added the script tags this code and it is working now thanks!

2 Likes

You set the TARGET attribute to a fixed name.

If you use _BLANK each link will open in a new blank tab.

If you set it to MYNEWTAB or some other value that you choose, the first link will open a new tab and subsequent links will use this named tab.

More details on how HTML links work can be found here. HTML DOM Anchor target Property

Wow. Thank you Denver

Thank you so much for this.

Jeff, thank you!! Works like a charm.

I am new to Ghost and was wondering why the heck “open in new tab” wasn’t an option with external link. I completely agree with another user that is proper UX.

Thank you so much for this fix. I tested it on my site and worked well.

Thank you both for this - works well for me

This is pure javascript function. Works perfect. Also it will not reduce the page speed. Thank you.