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 my SharePoint 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 from 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 😊, by 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". 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>
- SharePoint An unexpected error has occurred - Correlation ID and Merge-SPlogfile
- SharePoint list excel import error - Title is a required filed and can't be empty
- Send Email with attachment using SharePoint PowerShell, SMTP server
- Sharepoint errors were found when compiling the workflow
- How to update SharePoint List Item programmatically
- Merge-SPlogfile PowerShell - SharePoint Correlation ID error
- Get-ADUser PowerShell - Get AD user details using email address
- Restore deleted Office 365 SharePoint group site
- [Solved] SharePoint Access Denied error editing Document Name
- How to migrate SharePoint Designer 2010 workflow to Power Automate FLOW (Microsoft Office 365)
- Unable to load VM from snapshot. The snapshot has been saved for a different hardware configuration - Android
- Get Wifi Details : Android Programming - Android
- JSON Syntax : JSON Tutorial - Json-Tutorial
- Word count in Notepad++ - NotepadPlusPlus
- SharePoint Server 2016 error - Failed to connect to the configuration database - SharePoint
- Android Alert Dialog with Checkboxes example - Android
- java.lang.NoClassDefFoundError android.support.v4.content.LocalBroadcastManager - Android
- [Notepad++] Remove CR Carriage Return and LF Line feed (CRLF) - NotepadPlusPlus
- Failed to install Android.apk on device 'emulator-5554': timeout - Android-Studio
- How to get Mobile Screen Resolution Width and Height programatically - Android
- Tomcat Manager Default Username and Password - Tomcat
- Turning Off Chat in Gmail - Google
- [Solved] SharePoint Illegal operation attempted on a registry key that has been marked for deletion - SharePoint
- Find Sum of two numbers - C-Program
- Struts 2 Hello World Example in Eclipse - Java