Link da Web Part Hero Abre na Mesma Guia: Causa e Solução

Ao adicionar um link à Web Part Hero em uma página moderna do SharePoint, clicar nesse link geralmente abre o destino na mesma guia do navegador. Esse comportamento frustra os visitantes do site que esperam que uma nova guia seja aberta, especialmente quando o link aponta para um site externo ou um documento. A causa raiz é que a Web Part Hero não expõe uma configuração nativa para controlar o atributo target do link. Este artigo explica por que o link abre na mesma guia e fornece dois métodos confiáveis para forçar a abertura em uma nova guia ou janela.

Por que o Link da Web Part Hero Abre na Mesma Guia

A Web Part Hero é um componente de página moderna do SharePoint projetado para exibir até cinco blocos com imagem, título e descrição. Cada bloco pode vincular a uma página, documento ou URL externa. Ao configurar o link no painel de propriedades da Web Part Hero, você seleciona uma URL de destino, mas não pode escolher se o link abre na mesma guia ou em uma nova guia. O HTML subjacente gerado pela web part inclui target="_self" por padrão. Isso é proposital — a Web Part Hero não expõe um atributo target em sua interface de configuração.

A mesma limitação se aplica a outras web parts modernas, como a Web Part Links Rápidos e a Web Part Notícias. A Microsoft não adicionou uma caixa de seleção “Abrir em nova guia” a essas web parts até 2024. Para alterar o comportamento, você deve usar um script personalizado ou uma solução de terceiros que modifique o atributo target do link após o carregamento da página.

Dois Métodos para Fazer os Links da Web Part Hero Abrirem em Nova Guia

Método 1: Adicionar uma Web Part Editor de Script com JavaScript

Este método usa a Web Part Editor de Script clássica para injetar JavaScript que é executado após a página terminar de carregar. O script encontra todas as âncoras dentro da Web Part Hero e define seu atributo target como _blank.

1. Habilitar scripts personalizados no conjunto de sites
   Vá para a Central de administração do SharePoint, selecione Configurações e clique em Página de configurações clássicas. Em Script personalizado, escolha Permitir que usuários executem script personalizado em sites criados por autoatendimento e Permitir que usuários executem script personalizado em sites pessoais. Clique em OK. Aguarde até 24 horas para a alteração entrar em vigor. Alternativamente, use PowerShell: Set-SPOSite -Identity -DenyAddAndCustomizePages 0.
2. Editar a página e adicionar uma Web Part Editor de Script
   Na página que contém a Web Part Hero, clique em Editar no canto superior direito. Clique no ícone + para adicionar uma nova web part. Pesquise por Editor de Script e selecione-o. A Web Part Editor de Script aparecerá na página.
3. Inserir o código JavaScript
   Clique dentro da Web Part Editor de Script e cole o seguinte 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>
   Se sua Web Part Hero usar uma classe CSS diferente, inspecione a página usando as ferramentas de desenvolvedor do navegador para encontrar o seletor correto. Para a maioria das páginas modernas do SharePoint, .heroWebPart funciona.
4. Salvar e publicar a página
   Clique em Página na faixa de opções e depois em Parar edição. Escolha Publicar para tornar a página visível para todos os visitantes. Teste um link da Web Part Hero — ele agora deve abrir em uma nova guia.

Método 2: Usar uma Extensão do SharePoint Framework (SPFx)

Para conjuntos de sites onde scripts personalizados não são permitidos ou para uma solução mais sustentável, crie uma extensão SPFx que aplique a alteração de target globalmente a todas as Web Parts Hero em todas as páginas.

1. Configurar o ambiente de desenvolvimento SPFx
   Instale Node.js, Yeoman e o gerador do SharePoint Framework. Execute yo @microsoft/sharepoint e escolha Extension como tipo de componente, depois Application Customizer.
2. Escrever o código da extensão
   No arquivo gerado MyApplicationCustomizer.ts, adicione o seguinte código dentro do 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. Implantar a extensão no catálogo de aplicativos
   Empacote a solução usando gulp bundle --ship e gulp package-solution --ship. Envie o arquivo .sppkg para o catálogo de aplicativos do locatário. Adicione a extensão ao conjunto de sites onde a Web Part Hero é usada.
4. Verificar o comportamento
   Navegue até qualquer página que contenha uma Web Part Hero. Clique em um link — ele deve abrir em uma nova guia. A extensão se aplica automaticamente a todas as páginas existentes e novas, sem necessidade de edição adicional.

Problemas Comuns e Soluções Alternativas

A Web Part Editor de Script não aparece no seletor de web parts

A Web Part Editor de Script é uma web part clássica. Ela pode estar oculta por padrão em páginas modernas. Para torná-la visível, vá para a página, clique em Editar e depois no ícone +. No seletor de web parts, role até o final e clique em Ver todas as web parts. Pesquise por Editor de Script. Se ainda não aparecer, os scripts personalizados podem não estar habilitados no conjunto de sites. Siga o passo 1 do Método 1 para habilitar scripts personalizados.

O JavaScript não é executado após a navegação entre páginas

As páginas modernas do SharePoint usam navegação no lado do cliente. O evento window.onload pode não ser acionado ao navegar entre páginas. Para lidar com isso, use o SP.Navigation.NavigationEvent ou um mutation observer. Uma solução alternativa mais simples é desabilitar a navegação no lado do cliente para o site. Vá para as configurações do site, clique em Recursos do conjunto de sites e desative Renderização de página no lado do cliente para listas e bibliotecas do SharePoint. Isso força recarregamentos completos da página.

Links da Web Part Hero ainda abrem na mesma guia em dispositivos móveis

A abordagem com JavaScript funciona em navegadores de desktop, mas pode não ser aplicada corretamente em navegadores móveis que usam um mecanismo de renderização diferente. Teste no Safari do iOS e no Chrome do Android. Se os links não abrirem em uma nova guia, considere usar uma extensão SPFx com um seletor mais robusto que tenha como alvo classes CSS específicas para dispositivos móveis.

Web Part Hero vs Web Part Links Rápidos: Comportamento do Atributo Target do Link

Item	Web Part Hero	Web Part Links Rápidos
Atributo target padrão do link	_self (mesma guia)	_self (mesma guia)
Configuração nativa para alterar o target	Não	Não
Número de blocos/links	Até 5 blocos	Links ilimitados
Solução alternativa com script personalizado	Requer Editor de Script ou extensão SPFx	Requer Editor de Script ou extensão SPFx
Classe CSS usada no JavaScript	.heroWebPart	.quickLinksWebPart

A Web Part Hero e a Web Part Links Rápidos compartilham a mesma limitação: nenhuma opção nativa para abrir links em uma nova guia. Ambas exigem a mesma solução alternativa com script personalizado. A principal diferença é o nome da classe CSS usada no seletor JavaScript.

Agora você pode forçar os links da Web Part Hero a abrir em uma nova guia usando a Web Part Editor de Script com um trecho simples de JavaScript ou uma extensão SPFx mais robusta. Comece habilitando scripts personalizados no conjunto de sites e, em seguida, adicione a Web Part Editor de Script com o código fornecido. Para uma solução em todo o site que não exija edição de página, implante a extensão SPFx. Teste o comportamento em navegadores de desktop e dispositivos móveis e ajuste o seletor JavaScript se sua página usar um tema personalizado ou framework CSS.