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!
- Get-ADUser PowerShell - Get AD user details using email address
- SharePoint error cannot connect to the configuration database
- SharePoint - Use Today's Date Time in list view filter and calculated column
- Not receiving email notification alert in SharePoint Online workflow - Power Automate, FLOW
- How to configure PDF iFilter for SharePoint
- Deploy SharePoint wsp solution package using PowerShell
- How to enable anonymous public access for SharePoint Online site collection, file, folder without login ?
- How to enable missing SharePoint Site Assets, Site Pages library App
- Fix Power BI 404 not found error when connecting SharePoint Online List as Data Source
- Send Email with attachment using SharePoint PowerShell, SMTP server
- How to recover SharePoint FARM if the SQL Server IP changes
- SharePoint - The URL is invalid. It may refer to a nonexistent file or folder, or refer to a valid file or folder that is not in the current Web.
- SharePoint list excel import error - Title is a required filed and can't be empty
- Show Hide SharePoint column in List Library form with the conditional formula
- How to create classic site in SharePoint Online
- SharePoint 2010 DataForm Unable to display this Web Part System.StackOverflowException
- Trigger Flow on selected Listitem from SharePoint view - create button with JSON column formatting
- SharePoint Server 2016 error Microsoft Office Online Server 2016 cant be installed on the same machine as a Microsoft SharePoint Server product
- How to get SharePoint List Item URL using PowerShell
- Sign in as different user missing in SharePoint 2013, how to enable
- Fix error The tool was unable to install the Web Server (IIS) Role during SharePoint 2019 Setup
- How to redirect SharePoint Site Collection to different URL
- SharePoint Server 2016 setup error - A system restart from a previous installation or update is pending. Restart your computer and run setup to continue.
- See actual SharePoint error exception modify web.config
- SharePoint PowerShell Merge-SPLogFile filter by time using StartTime EndTime
- Microsoft Teams: Sign-in is blocked error - Teams
- Mac OS X Error: Could not create the Java Virtual Machine - Mac-OS-X
- Android Studio Change SDK Path - Android
- SharePoint Designer 2010 - errors were found when compiling the workflow - SharePoint
- HTML, HTML5. CSS, CSS3 Color Codes 2020 - Html
- Disable Chrome Notification bell from Mac OS X menu bar - Mac-OS-X
- How to Change Bootstrap Carousel Slide Speed - Bootstrap
- Android Eclipse This version of the rendering library is more recent than your version of ADT plug-in. Please update ADT plug-in - Android
- JDK Location in Android Studio - Android-Studio
- Whats new in Python 3.10 Pre-release - Python
- How to add Date and Time to Windows Notepad File - NotepadPlusPlus
- Make Notepad++ the default App for .txt file extensions - NotepadPlusPlus
- Your JBoss Application Server 7 is running However you have not yet added any users to be able to access the admin console - Java
- [Android] This view is not constrained vertically: at runtime it will jump to the top unless you add a vertical constraint - Android
- SharePoint 2016 error - Could not find file ManageUserProfileServiceApplicationTenantSimplified.xml - SharePoint
- Emulator: Warning: restoring GLES1 context from snapshot. App may need reloading. - Android-Studio
- [Nopepad++] How to add text at end of each line - NotepadPlusPlus