Forum Discussion

Nigel Witherdin's avatar
Nigel Witherdin
Iron Contributor
Sep 25, 2019

SharePoint Online not respecting target="_blank" anymore?

Hi,

I have custom spfx webparts that have links in them which the users wish to be opened in a new tab when clicked. This was achieved using the typical target="blank" parameter, but just over the last week SharePoint modern pages now open these links in the same tab (previously they were opening in new tab as expected).

 

I have tried this with a anchors, and also using the Office Fabric Link component - same result.

 

Anyone know why, and how I can get these links to open in a new tab?

 

Also worth noting that the links to lists and libraries off the Site Contents page still open in a new tab - can I replicate this behaviour somehow??

 

Thanks!

 

fabric react
SPFx
    • Nigel Witherdin's avatar
      Nigel Witherdin
      Iron Contributor
      Sep 26, 2019

      Joel Rodrigues - Nailed it!

       

      Thank you so much - adding the tag in resolved the issue, with the bonus that it doesnt really seem to add any extra processing time as Julie warns about in her post.

       

      Thanks again!

  • Vikram_Samal's avatar
    Vikram_Samal
    Steel Contributor
    Sep 25, 2019

    Nigel Witherdin  I just tried and all look good for me. Make sure we use target="_blank"

     

    public render(): void {
        this.domElement.innerHTML = `
          <div class="${ styles.helloWorld }">
            <a href="https://aka.ms/spfx" class="${ styles.title }" target="_blank">Click Here</a>
          </div>`;
      }
    • Nigel Witherdin's avatar
      Nigel Witherdin
      Iron Contributor
      Sep 25, 2019

      Vikram_Samal 

       

      So strange - I am using:

      <div class="ms-TooltipHost root-449">
      <a target="_blank" href="https://scentregroup.sharepoint.com/sites/hrrefresh" class="ms-Link root-592" style="font-size: 17px;">HR</a>
      </div>

       

      and clicking the link is opening in the current tab.

       

      And furthermore, the out of the box "News" webpart is opening clicked articles in the same window even though they have the target="_blank":

      <a aria-label="Operating Capital Approvals launch Published by Nigel Witherdin on 27 June. Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut viverra nunc. Sed tempus accumsan mi, vitae ultricies urna vulputate sit amet. Donec non molestie nisl, a ornare ipsum. Quisque id tristique neque. Nunc imperdiet felis nulla, nec…" data-automation-id="newsItemTitle" href="https://scentregroup.sharepoint.com/sites/technologyrefresh/SitePages/Operating-Capital-Approvals-launch.aspx" target="_blank" data-interception="propagate" class="text_title_d116a82a text_title-228 textListLayoutTitle_d116a82a" tabindex="-1">Operating Capital Approvals launch</a>

       

      Maybe something else in my code base is affecting something??

       

       
      • Vikram_Samal's avatar
        Vikram_Samal
        Steel Contributor
        Sep 25, 2019

        Nigel Witherdin I stipped down all styling and tried still the same and opening in new tab. 

         

         

         

         

          public render(): void {
    this.domElement.innerHTML = `
      <div>
        <a target="_blank" href="<a href="https://aka.ms/spfx">Click" target="_blank">https://aka.ms/spfx">Click</a> Here</a>
      </div>`;
  }

         

         

         
        Can you try with the different browser just to ensure no other issue.

Resources