Cuando hace clic en un vínculo dentro de un elemento web Hero de SharePoint, la página de destino suele abrirse en la misma pestaña del navegador. Este comportamiento sorprende a muchos editores de páginas que esperan que los vínculos se abran en una pestaña nueva de forma predeterminada. La causa es la configuración subyacente del vínculo en el elemento web Hero, que no incluye un atributo target establecido en _blank. Este artículo explica exactamente por qué ocurre esto, cómo SharePoint gestiona la navegación de forma predeterminada y qué puede hacer para que los vínculos de Hero se abran en una pestaña nueva.
Puntos clave: comportamiento de los vínculos del elemento web Hero
- Propiedades de vínculo del elemento web Hero: El cuadro de diálogo de vínculo no incluye una casilla “Abrir en una pestaña nueva”; todos los vínculos usan el destino
_selfpredeterminado. - Navegación de páginas modernas de SharePoint: La mayoría de los elementos web integrados, incluido Hero, no fuerzan la apertura en pestañas nuevas a menos que se codifique explícitamente en una solución personalizada.
- Solución alternativa mediante formato JSON o acción personalizada: Puede anular el comportamiento predeterminado editando la página en SharePoint Framework o usando un elemento web Editor de scripts.
Cómo gestiona los vínculos el elemento web Hero
El elemento web Hero es un componente de página moderna de SharePoint diseñado para mostrar hasta cinco mosaicos con imágenes, texto y un vínculo. Cuando agrega un vínculo a un mosaico de Hero, proporciona una URL a través del cuadro de diálogo del selector de vínculos. Ese cuadro de diálogo solo acepta una URL; no ofrece ninguna opción para controlar la ventana o pestaña de destino. SharePoint aplica el comportamiento de vínculo predeterminado para el elemento <a>, que es target="_self". Esto significa que la página vinculada se carga en la misma pestaña del navegador, reemplazando la página actual. El elemento web no lee ningún parámetro de cadena de consulta ni metadatos para cambiar este comportamiento. Esto es coherente en todos los elementos web modernos estándar de SharePoint, incluidos el elemento web Vínculos rápidos y el elemento web Botón.
La razón técnica
El elemento web Hero representa cada mosaico como una etiqueta de anclaje (<a>) con un atributo href que apunta a la URL que introdujo. La especificación HTML establece que, si no está presente el atributo target, el navegador usa _self de forma predeterminada. SharePoint no inserta un atributo target="_blank" porque el desarrollador del elemento web optó por no incluir esa opción en el panel de propiedades. Microsoft diseñó el elemento web Hero para la navegación dentro de la misma colección de sitios, asumiendo que los usuarios usarían el botón Atrás del navegador o la navegación del sitio para regresar. Agregar una opción de pestaña nueva requeriría elementos de interfaz de usuario adicionales y aumentaría la complejidad de un componente pensado para ser simple y visual.
Pasos para hacer que un vínculo del elemento web Hero se abra en una pestaña nueva
Dado que el elemento web Hero estándar no admite el comportamiento de pestaña nueva, debe usar uno de estos métodos alternativos. Cada método tiene ventajas y desventajas en cuanto a mantenimiento, seguridad y experiencia del usuario.
- Usar una extensión personalizada de SharePoint Framework
Cree un Application Customizer de SharePoint Framework (SPFx) que se ejecute en todas las páginas modernas. En el código del personalizador, use JavaScript para encontrar todos los vínculos del elemento web Hero y agregartarget="_blank"a cada etiqueta de anclaje. Esto requiere Node.js, un editor de código y conocimientos básicos de desarrollo con SPFx. Implemente la solución en el catálogo de aplicaciones y agregue el personalizador a su sitio. Este método le brinda control total, pero requiere recursos de desarrollador. - Reemplazar el elemento web Hero por el elemento web Vínculos rápidos
El elemento web Vínculos rápidos incluye una propiedad llamada “Abrir vínculos en una pestaña nueva” en su panel de configuración. Edite su página, quite el elemento web Hero y agregue un elemento web Vínculos rápidos. En el panel de propiedades del elemento web, expanda la sección “Diseño” y marque la casilla “Abrir vínculos en una pestaña nueva”. Luego agregue sus mosaicos manualmente. Este método es rápido y no requiere código. La desventaja es que el elemento web Vínculos rápidos no admite el formato de imagen grande de Hero. - Agregar un elemento web Editor de scripts con JavaScript personalizado
Inserte un elemento web Editor de scripts (disponible en el cuadro de herramientas de páginas modernas) debajo del elemento web Hero. En el editor de scripts, escriba un pequeño script que se ejecute después de que se cargue la página, seleccione todos los vínculos de los mosaicos de Hero y establezca su atributotargeten_blank. Código de ejemplo:<script>document.querySelectorAll('.heroTile a').forEach(el => el.target = '_blank');</script>. Este método funciona de inmediato, pero puede dejar de funcionar si Microsoft actualiza los nombres de clase CSS del elemento web Hero. - Usar un elemento web de SharePoint Framework con compatibilidad para pestaña nueva
Cree un elemento web Hero personalizado con SPFx que incluya un conmutador en el panel de propiedades para el comportamiento de pestaña nueva. Esto requiere las mismas habilidades de desarrollo con SPFx que el primer método, pero le brinda un componente reutilizable. Puede almacenar la preferencia de pestaña nueva en una propiedad del elemento web y representar los vínculos en consecuencia.
Conceptos erróneos comunes y soluciones alternativas
¿Puedo agregar target=”_blank” en la propia URL del vínculo?
No. Agregar target="_blank" dentro del campo de URL, como https://example.com" target="_blank, no funciona. El elemento web Hero trata toda la cadena como una URL e intenta navegar a ella, lo que da como resultado un vínculo roto. El atributo target es un atributo HTML de la etiqueta de anclaje, no parte de la URL.
¿Mantener presionada la tecla Ctrl o Mayús al hacer clic cambia el comportamiento?
Sí. Los usuarios pueden mantener presionada la tecla Ctrl (Windows) o Command (Mac) mientras hacen clic en el vínculo para forzar su apertura en una pestaña nueva. Del mismo modo, mantener presionada la tecla Mayús abre el vínculo en una ventana nueva. Esta es una anulación a nivel del navegador y funciona independientemente del atributo target. Sin embargo, no puede confiar en que todos los usuarios conozcan o recuerden este atajo.
¿Microsoft agregará una opción de pestaña nueva en una actualización futura?
Microsoft no ha anunciado planes para agregar una opción de pestaña nueva al elemento web Hero. El elemento web no ha cambiado en varios años. La solución alternativa recomendada en la documentación de Microsoft es usar el elemento web Vínculos rápidos cuando necesite el comportamiento de pestaña nueva. Si necesita el impacto visual del elemento web Hero, debe usar uno de los métodos personalizados descritos anteriormente.
Elemento web Hero frente al elemento web Vínculos rápidos: comparación del comportamiento de los vínculos
| Elemento | Elemento web Hero | Elemento web Vínculos rápidos |
|---|---|---|
| Destino de vínculo predeterminado | Misma pestaña (_self) | Misma pestaña (_self) a menos que se configure |
| Opción de pestaña nueva en la configuración | No disponible | Sí, en Diseño > Abrir vínculos en una pestaña nueva |
| Diseño visual | Imagen grande de Hero con superposiciones | Cuadrícula o lista compacta |
| Número máximo de mosaicos | 5 | Ilimitado |
| Se requiere código personalizado para pestaña nueva | Sí | No |
Ahora puede elegir el mejor enfoque para su sitio según la comparación anterior. Si prefiere una solución sin código, reemplace el elemento web Hero por el elemento web Vínculos rápidos y habilite la opción Abrir vínculos en una pestaña nueva. Si necesita el diseño de Hero, use el elemento web Editor de scripts con JavaScript como solución alternativa rápida. Para una corrección permanente en todos los sitios, invierta en una extensión SPFx personalizada que agregue compatibilidad con pestañas nuevas a cada elemento web Hero de su inquilino.