If you are working with Modern pages or SPFX web part in SharePoint Online, you may come across a problem when wanting to open links in a new browser tab, however, they open in the same tab 😕.
How to stop SharePoint Online links from opening in the same window? How to open SharePoint Online links in a new tab window? 🙄 If you are looking for answers to these questions, let's work together and find a solution!
SharePoint Modern links
⚡️ Why SharePoint Online links do not open in new tab ?
By design, SharePoint links open in the same tab in the modern pages (this could be a link to any site, document, page, or anything else within your SharePoint tenant).
On the contrary, external links do open in a new tab, say a link to Code2Care https://code2care.org .
The behavior is the same for,
- Quick Launch navigation links.
- Modern web parts like Quick Links, Images, Hero, etc.
- Classic web parts like Content Editor, Script Editor.
- SPFX web parts.
⚡️ Let us try the HTML way --> target="_blank"
Use anchor tag with attribute target="_blank" which would open the hyperlink in a new window 😎.<a href="https://c2c.sharepoint.com/sites/SPDev/home.aspx" target="_blank">Code2Care SPO Home Page</a>⚡️ Why does the target="_blank" not work?
SharePoint Online uses an inbuilt Page Router which is a mechanism used to render pages in SharePoint. It decides how the SharePoint page should be rendered and ignores the target attribute. Same is the case with SharePoint Framework (spfx) web parts.✔️ The hidden gem - "data-interception" attribute
Use "data-interception" attribute that can be added to the HTML anchor tag to bypass the Page Router logic.In order to open link in a new tab, add the attribute data-interception="off" to your anchor tag. This will bypass the default behavior.
<a href="https://c2c.sharepoint.com/home.aspx" target="_blank" data-interception="off">Code2Care SPO Home Page</a>This trick works with Scripts (Content Editor, Modern Script Editor) as well, remember that target="_blank" will not work unless you include data-interception="off". But avoid injecting script and manipulating the SharePoint page DOM, go for SPFX web part instead.
⭐ Office Fabric - open SharePoint link in new tab
<Link href="https://c2c.sharepoint.com/sites/SPDev/fabric.aspx" target="_blank" data-interception="off">Office Fabric Link</Link>⭐ SPFX - open SharePoint link in new tab
<a href="https://c2c.sharepoint.com/sites/SPDev/spfx.aspx" target="_blank" data-interception="off">SPFX link</a>⭐ Modern Script Editor - open SharePoint link in new tab
<a href="https://c2c.sharepoint.com/sites/SPDev/mypage.aspx" target="_blank" data-interception="off">Hyperlink</a>Have Questions? Post them here!
More Posts related to SharePoint,
- SharePoint error - An exception occurred when trying to issue security token: This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms..
- PowerShell iterate and get all SharePoint sites and sub sites
- SharePoint Online: Editing session has ended Message
- How to Share Microsoft SharePoint Site with Users or Groups
- How to delete SharePoint Online List Item using REST API
- SharePoint List excel import - This table exceeds the maximum number of supported rows
- How to disable SharePoint subsite creation option for owners
- SharePoint 2010 August 2015 Update KB3055049 - Duplicate Document ID issue bug fixed
- SharePoint Server 2016 Preview installation error - This Product Key isn't a valid Microsoft Office 2016 Product Key. Check that you've entered it correctly.
- How to upload file programmatically to SharePoint Document Library using Server Object Model C# .Net
- Access URL for SharePoint Tenant Admin Center (Online Office 365)
- Error when deleting SharePoint Online folder or file
- How to extend retiring SharePoint 2010 Workflows and continue with Office 365
- How to generate client id and secret to register SharePoint App with OAuth
- How to delete SharePoint List Item programmatically using C#.Net
- How to retrieve all SharePoint Online List Items using Rest API
- [Solved] SharePoint Search Internal server error exception
- Create SharePoint Site Collection using PowerShell New-SPSite
- Fix SharePoint PowerShell error - The term Get-SPweb is not recognized as the name of a cmdlet function script file or operable program
- How to enable anonymous public access for SharePoint Online site collection, file, folder without login ?
- SharePoint Server 2016 installation System Hardware requirements
- How to create SharePoint Online List Item using REST API
- Changed AD user display name showing old name in SharePoint
- Recommended size and resolution for SharePoint Online Site logo
- Microsoft 365: How to Turn Off Delve in SharePoint Online for All Users
More Posts:
- How to Add a horizontal line in Android Layout - Android
- Calculate days between dates using dateutils ddiff command - Linux
- Reading JSON file in Python with Examples - Python
- Error 404 Tomcat homepage http://localhost:8080/ not displayed - Tomcat
- 5+ Fibonacci number Series Java Program Examples [ 0 1 1 2 3 ..] - Java
- pip install see the list of all available versions of package - PIP
- Tomcat Manager Default Username and Password - Tomcat
- Open Terminal in Finder Current Location - MacOS