Make (All) External Links Open in a New Tab

1) Put this in your Ghost site's Code Injection Site Footer:

<script>
$(function() {
$('.gh-content a').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank');
});
</script>

(Note: The above code works with the Casper theme. Since this website's theme is just Casper with a few CSS tweaks, this is the exact script used on this site.

However, you might have to change the above .gh-content a to match the CSS selector for your specific theme. For example, on one of my other sites I needed to change the .gh-content a to .post-content a in order to make it work.)

or...

2) Put this in your Ghost site's Code Injection Site Footer:

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

(From Aileen Nowak at https://forum.ghost.org/t/i-want-my-external-links-to-open-in-a-new-tab/9830/9)

or...

3) Put this in your Ghost site's Code Injection Site Footer:

<script>
[...document.querySelectorAll("a[href*='?xgtab&']")].forEach(link => {
link.setAttribute("target", "moredetail");
});
</script>

(From David Darnes at https://forum.ghost.org/t/i-want-my-external-links-to-open-in-a-new-tab/9830/9)

or...

4) Put this in your Ghost site's Code Injection Site Footer:

<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');
    }
  }
</script>

(From eddiesigner at https://github.com/eddiesigner/weiss-pro/wiki/Open-external-links-in-a-new-tab-by-default)

or...

5) Put this in your Ghost site's Code Injection Site Footer:

<script>
  $( document ).ready(function() {
  	$(".gh-content a").attr("target","moredetail");
  });
</script>

(Note: The above code works with the Casper theme. However, you might have to change the above .gh-content a to match the CSS selector for your specific theme. For example, on one of my sites I needed to change the .gh-content a to .post-content a)

or...

6) Make those external links open in an Ajax Slide-In Panel.

or...

7) Paste a code snippet from the article below into your Ghost site's Code Injection Site Footer, or at the bottom of default.hbs just above {{{block "scripts"}}}. (Either way, do put the code in between <script> and </script> tags or it won't work.)

Use JavaScript to Make External Links Open in a New Window

This is a quick post showing how to use JavaScript to make links to external websites open in a new window (or tab) instead of in the current window. This is...

Rob Wise

Here's how it should look if you paste the jQuery from the above article into your site's footer code injection...