El enlace del elemento web hero se abre en la misma pestaña: causa y solución

Cuando agregas un enlace al elemento web Hero en una página moderna de SharePoint, al hacer clic en ese enlace normalmente se abre el destino en la misma pestaña del navegador. Este comportamiento frustra a los visitantes del sitio que esperan que se abra una nueva pestaña, especialmente cuando el enlace apunta a un sitio externo o a un documento. La causa raíz es que el elemento web Hero no expone una configuración integrada para controlar el atributo de destino de su enlace. Este artículo explica por qué el enlace se abre en la misma pestaña y proporciona dos métodos confiables para forzar que el enlace se abra en una nueva pestaña o ventana.

Por qué el enlace del elemento web Hero se abre en la misma pestaña

El elemento web Hero es un componente de página moderna de SharePoint diseñado para mostrar hasta cinco mosaicos con una imagen, un título y una descripción. Cada mosaico puede enlazar a una página, documento o URL externa. Cuando configuras el enlace en el panel de propiedades del elemento web Hero, seleccionas una URL de destino pero no puedes elegir si el enlace se abre en la misma pestaña o en una nueva. El HTML subyacente generado por el elemento web incluye target="_self" por defecto. Esto es por diseño: el elemento web Hero no expone un atributo target en su interfaz de configuración.

La misma limitación se aplica a otros elementos web modernos como el elemento web Vínculos rápidos y el elemento web Noticias. Microsoft no ha agregado una casilla de verificación “Abrir en una pestaña nueva” a estos elementos web a partir de 2024. Para cambiar el comportamiento, debes usar un script personalizado o una solución de terceros que modifique el atributo target del enlace después de que la página se cargue.

Dos métodos para hacer que los enlaces del elemento web Hero se abran en una nueva pestaña

Método 1: Agregar un elemento web Editor de scripts con JavaScript

Este método utiliza el elemento web clásico Editor de scripts para inyectar JavaScript que se ejecuta después de que la página termine de cargarse. El script encuentra todas las etiquetas de anclaje dentro del elemento web Hero y establece su atributo target a _blank.

1. Habilitar scripts personalizados en la colección de sitios
   Ve al centro de administración de SharePoint, selecciona Configuración, luego haz clic en Página de configuración clásica. En Script personalizado, elige Permitir a los usuarios ejecutar script personalizado en sitios creados por autoservicio y Permitir a los usuarios ejecutar script personalizado en sitios personales. Haz clic en Aceptar. Espera hasta 24 horas para que el cambio surta efecto. Alternativamente, usa PowerShell: Set-SPOSite -Identity -DenyAddAndCustomizePages 0.
2. Editar la página y agregar un elemento web Editor de scripts
   En la página que contiene el elemento web Hero, haz clic en Editar en la esquina superior derecha. Haz clic en el icono + para agregar un nuevo elemento web. Busca Editor de scripts y selecciónalo. El elemento web Editor de scripts aparece en la página.
3. Insertar el código JavaScript
   Haz clic dentro del elemento web Editor de scripts y pega el siguiente código:
   <script>
window.onload = function() {
var heroLinks = document.querySelectorAll('.heroWebPart a[href]');
for (var i = 0; i < heroLinks.length; i++) {
heroLinks[i].setAttribute('target', '_blank');
}
};
</script>
   Si tu elemento web Hero usa una clase CSS diferente, inspecciona la página usando las herramientas de desarrollador del navegador para encontrar el selector correcto. Para la mayoría de las páginas modernas de SharePoint, .heroWebPart funciona.
4. Guardar y publicar la página
   Haz clic en Página en la cinta, luego haz clic en Detener edición. Elige Publicar para hacer que la página sea visible para todos los visitantes. Prueba un enlace del elemento web Hero: ahora debería abrirse en una nueva pestaña.

Método 2: Usar una extensión de SharePoint Framework (SPFx)

Para colecciones de sitios donde no se permiten scripts personalizados o para una solución más mantenible, crea una extensión de SPFx que aplique el cambio de destino globalmente a todos los elementos web Hero en todas las páginas.

1. Configurar el entorno de desarrollo de SPFx
   Instala Node.js, Yeoman y el generador de SharePoint Framework. Ejecuta yo @microsoft/sharepoint y elige Extensión como tipo de componente, luego Personalizador de aplicación.
2. Escribir el código de la extensión
   En el archivo generado MyApplicationCustomizer.ts, agrega el siguiente código dentro del método onInit:
   public onInit(): Promise<void> {
SPComponentLoader.loadCss('');
document.addEventListener('DOMContentLoaded', () => {
const heroLinks = document.querySelectorAll('.heroWebPart a[href]');
heroLinks.forEach(link => link.setAttribute('target', '_blank'));
});
return Promise.resolve();
}
3. Implementar la extensión en el catálogo de aplicaciones
   Empaqueta la solución usando gulp bundle --ship y gulp package-solution --ship. Sube el archivo .sppkg al catálogo de aplicaciones del inquilino. Agrega la extensión a la colección de sitios donde se usa el elemento web Hero.
4. Verificar el comportamiento
   Navega a cualquier página que contenga un elemento web Hero. Haz clic en un enlace: debería abrirse en una nueva pestaña. La extensión se aplica automáticamente a todas las páginas existentes y nuevas sin necesidad de edición adicional.

Problemas comunes y soluciones alternativas

El elemento web Editor de scripts no aparece en el selector de elementos web

El elemento web Editor de scripts es un elemento web clásico. Puede estar oculto por defecto en las páginas modernas. Para hacerlo visible, ve a la página, haz clic en Editar, luego haz clic en el icono +. En el selector de elementos web, desplázate hasta la parte inferior y haz clic en Ver todos los elementos web. Busca Editor de scripts. Si aún no aparece, los scripts personalizados pueden no estar habilitados en la colección de sitios. Sigue el paso 1 del Método 1 para habilitar los scripts personalizados.

JavaScript no se ejecuta después de la navegación de página

Las páginas modernas de SharePoint usan navegación del lado del cliente. El evento window.onload puede no dispararse al navegar entre páginas. Para manejar esto, usa SP.Navigation.NavigationEvent o un observador de mutaciones. Una solución alternativa más simple es deshabilitar la navegación del lado del cliente para el sitio. Ve a la configuración del sitio, haz clic en Características de la colección de sitios y desactiva Representación de páginas del lado del cliente de listas y bibliotecas de SharePoint. Esto fuerza recargas completas de página.

Los enlaces del elemento web Hero aún se abren en la misma pestaña en dispositivos móviles

El enfoque de JavaScript funciona en navegadores de escritorio pero puede no aplicarse correctamente en navegadores móviles que usan un motor de renderizado diferente. Prueba en Safari de iOS y Chrome de Android. Si los enlaces no se abren en una nueva pestaña, considera usar una extensión de SPFx con un selector más robusto que apunte a clases CSS específicas para móviles.

Elemento web Hero vs elemento web Vínculos rápidos: comportamiento del destino del enlace

Elemento	Elemento web Hero	Elemento web Vínculos rápidos
Destino del enlace por defecto	_self (misma pestaña)	_self (misma pestaña)
Configuración integrada para cambiar el destino	No	No
Número de mosaicos/enlaces	Hasta 5 mosaicos	Enlaces ilimitados
Solución alternativa con script personalizado	Requiere Editor de scripts o extensión de SPFx	Requiere Editor de scripts o extensión de SPFx
Clase CSS utilizada en JavaScript	.heroWebPart	.quickLinksWebPart

El elemento web Hero y el elemento web Vínculos rápidos comparten la misma limitación: no hay opción nativa para abrir enlaces en una nueva pestaña. Ambos requieren la misma solución alternativa con script personalizado. La principal diferencia es el nombre de la clase CSS utilizada en el selector de JavaScript.

Ahora puedes forzar que los enlaces del elemento web Hero se abran en una nueva pestaña usando el elemento web Editor de scripts con un fragmento de JavaScript simple o una extensión de SPFx más robusta. Comienza habilitando los scripts personalizados en la colección de sitios, luego agrega el elemento web Editor de scripts con el código proporcionado. Para una solución a nivel de sitio que no requiera edición de páginas, implementa la extensión de SPFx. Prueba el comportamiento en navegadores de escritorio y móviles, y ajusta el selector de JavaScript si tu página usa un tema personalizado o un marco CSS.