Problem Statement
Video Or Image is not getting opened in the new window even with using target=“_blank” property in the Anchor "<a “>” or any other HTML tag in Sharepoint custom web parts?
Root Cause
Navigation to the page is achieved via a page router to avoid full refresh of the screen, When you develop custom SPFx solutions the behavior of smart navigation might not be desirable, especially for scenarios using the target
attribute to open a page in a separate tab in the browser.
Issue Resolution
In the below example, the target
attribute will be ignored and the page opens in the same tab via page router logic. In order to override the page router for hyperlinks add the data-interception
attribute to the link with a value of off
.
Give data-interception=”off” property to the tag. Below is the sample code for the same.
<a className={styles.openInNewTab} onClick={()=>updateViews()} href={cardData.url} target="_blank" data-interception="off"><Icon iconName='OpenInNewTab'/></a>
This will help you to open any video or image in the new window.