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!
⚡️ 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 😎.
Oops, what happened 😲 ? Why did that not work ? - The anchor tag ignores the target="_blank" attribute for internal links but works for external links. You may specify to open links in a new tab, but that will not work.
<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" attributeUse "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.
Try now, your SharePoint hyperlinks from Modern pages will open in new tab 😊, respecting the target="_blank" attribute.
<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!
- Managed Metadata error - The data returned from the tagging UI was not formatted correctly
- How to generate client id and secret to register SharePoint App with OAuth
- Create SharePoint Site Collection with new Content database in existing web application
- Fix Error 2711 SQL RBS client - The installer has encountered an unexpected error. The specified Feature name ('Docs') not found in Feature table
- How to exclude results from SharePoint Search
- 'Edit Document' Requires a Windows Sharepoint Services-compatible application and Microsoft Internet Explorer 6.0 or higher
- [Solved] SharePoint Access Denied error editing Document Name
- Recommended size and resolution for SharePoint Online Site logo
- SharePoint Server 2016 IT Preview - new improved Features and Enhancements
- Restore deleted Office 365 SharePoint group site
- SharePoint An unexpected error has occurred - Correlation ID and PowerShell Merge-SPlogfile
- [Solved] SharePoint Search Internal server error exception
- SharePoint CAML query error - The XML source is not correct
- How to hide quick launch in SharePoint classic site
- Not receiving email notification alert in SharePoint Online workflow - Power Automate, FLOW
- Change SharePoint search results FullTextSqlQuery RowLimit 10000
- Fix Power BI error Access to the resource is forbidden when connecting SharePoint Online List as data source
- [Fix] Restricted View permission level missing in SharePoint Online site library
- How to upload file programmatically to SharePoint Document Library using Server Object Model C# .Net
- How to create classic site in SharePoint Online
- That did'nt work, Issue type User not in directory - SharePoint external access error
- Merge-SPlogfile PowerShell - SharePoint Correlation ID error
- Fix Power BI 404 not found error when connecting SharePoint Online List as Data Source
- SharePoint Server 2016 IT Preview Deprecated Removed features
- SharePoint error - An exception occurred when trying to issue security token: This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms..
- Validate email address in Python using regular expression (regex) - Python
- How to get SharePoint List Item URL using PowerShell - SharePoint
- How to Uninstall Brew on Mac - MacOS
- Disable jQuery button after being click - jQuery
- How to uninstall GarageBand from Mac - MacOS
- Deep Dive: Why avoid java.util.Date and Calendar Classes - Java
- How to install brew on macOS Ventura - MacOS
- The declared package does not match the expected package Eclipse - Android