The Quick Links webpart is a great way to add links to your SharePoint pages and is one the webparts I use frequently when developing Intranet sites. The bug bear I have is that it doesn’t have a tick box to say open this link in a new browser tab. If the URL for the link is to a page or document in your SharePoint, then it automatically opens in the same tab, where as links to other URL’s open in a new tab.

The main issue I come across is when someone adds a link to a document. The end user clicks the Quick Link and because the URL is to SharePoint, it opens in the same tab, leaving no nice way to navigate back to the page containing the link.

If you have a small number of links, then you can use a URL shortener like TinyURL to generate a short URL for the link. SharePoint will think this is an external link and open in a new tab.

If you have a lot of links, then this approach might work better for you.

Using the Modern Script Editor webpart at the bottom of the SharePoint page, embed the Javascript below (don’t forget to use your tenant URL) and now links to documents will open in a new tab. Magic!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<script>
console.log('loaded script')
// $(window).bind("load", function(){
    console.log('ON LOAD')

    $("a").each(function(index,a){
        console.log('inside',a.href)
       if(a.href.startsWith('https://tenantname.sharepoint.com/:w')){
           console.log('replacing link')
           a.target="_blank";
           a.setAttribute('data-interception','off')
       }
   })
//})
</script>

The script waits for the page to load and then replaces URL’s that start with the site URL and a “:w”. This is unique to the document view / edit URL and prevents the script from breaking other links unintentionally.

The script modifies the URL to use a blank target tab and also turns off the data-interception option. You need to do both of these actions to make this work in SharePoint.

The script uses the JQuery Library and you may decide to keep a local copy of the jquery.min.js library in your site, rather than getting a copy from the Internet.

Using a Modern Script Editor means the script runs only in the page it was added to. If you have many sites, then you might want use a similar approach with an SPFX webpart.