none
Need easy way to force all links to open in new tab RRS feed

  • Question

  • I need every link on my entire site to open in a new tab. Most of the links are displayed in link list webparts.  How can I do this without using jquery?
    Wednesday, November 27, 2013 5:08 PM

All replies

  • What about adding something like this to your site's custom css:

    a
    {
    target-name:new;
    }

    Wednesday, November 27, 2013 5:17 PM
  • How would I go about doing that?  Is that something I could put in a script webpart too?
    Wednesday, November 27, 2013 5:20 PM
  • Normally, I'd create a new css file with the custom styles defined, then upload that to the Style Library and register the new file as part of the site's master page. But it occurs to me that I jumped a couple steps ahead and should have asked a couple questions first.

    First off, are you working in a publishing site, or more of a traditional intranet site?

    If you're working in a publishing site and you have access to the Design Manager, you can create a custom master page for the site and integrate the css in the page head of the master page. Here's a Technet discussion on how to work through that. (and another from StackExchange)

    However, if you don't have access to the Design Manager or don't want to go mucking around with your site design (or can't, by order of the local SharePoint Police!), you should be able to use a Script Editor web part to include the style on the pages where you want the behavior. The down-side to this approach, though, is that you have to remember to add the script editor on every page where you want links to open in new windows...every page, every time.

    Wednesday, November 27, 2013 5:37 PM
  • It is an intranet site.  I would rather not muck around with the design (particularly because the powers that be change their minds on what they want every five minutes), so I'd be willing to try it in a script editor. I tried the following, but it didn't have any effect on the links:

    <style type="text/css">
    a
     {
     target-name:new;
     }
    </style>

    Am I doing that wrong?

    Wednesday, November 27, 2013 5:58 PM
  • I'm sorry, I just tried my "theory" and saw that SharePoint protects me from using the target-name:new CSS property...probably because the property isn't supported in most browsers. That was careless on my part.

    Let me do a little digging & see if I can come up with a simple JavaScript to add something like target="_blank" to all links on the page (Although keep in mind, that kind of approach would tend to affect things like global navigation and QuickLaunch links, too...you could be setting yourself up for a browser window/tab proliferation  nightmare.)

    Wednesday, November 27, 2013 7:05 PM
  • If you're willing to use some JavaScript (no jQuery required), you can try adding the following:

    <script>
    AddTargetBlank();
    
    function AddTargetBlank(){
    	var links = document.querySelectorAll("a");
    	for(var i = 0; i < links.length; i++){
    		links[i].setAttribute("target","_blank");
    	}
    }
    </script>

    Wednesday, November 27, 2013 7:19 PM
  • I tried this (added it to a script editor) but links still open in the same tab.

    Wednesday, November 27, 2013 7:32 PM
  • I would use F12 developer tools to inspect the page, and see what those links look like, as well as other links around the page (including the navigation nodes).

    • If some have the target="_blank" attribute but others don't, it's possible that the script is executing before all the links have been added to the page. If that's the case, you might be able to delay the execution of the script until after the page has loaded.
    • If the links have an onClick attribute (such as onclick="GoToLink(this);return false;" ) then it might not matter what you do, they'll always open in the current window 

    You can also use the Script tab of the F12 tools to set a breakpoint in the JavaScript and start debugging to make sure it's actually executing.

    Wednesday, November 27, 2013 7:59 PM
  • I've run into that problem before. The Script Editor seems a little flaky right now...either that or I just haven't grokked its use quite yet. However, I've tried the JavaScript thriggle provided and got it to work by doing the following:

    1. Add a Content Editor Web Part to the page.

    2. Edit the web part so you can get to the Format Text tab on the ribbon...but don't type anything just yet!

    3. Click the Edit Source button on the Format Text tab.

    4. Paste thriggle's script into the HTML source for the CEWP.

    5. Save the page, and give the links a try.

    • Proposed as answer by thriggle Monday, December 2, 2013 2:12 PM
    Wednesday, November 27, 2013 8:01 PM
  • I tried that and it still opens in the same tab.
    Tuesday, December 3, 2013 8:49 PM
  • This worked great for me! I didn't have to do anything besides copying and pasting.
    Monday, June 4, 2018 10:52 PM