Ao clicar em um link dentro de um Hero Web Part do SharePoint, a página de destino geralmente abre na mesma guia do navegador. Esse comportamento surpreende muitos editores de página que esperam que os links abram em uma nova guia por padrão. A causa é a configuração subjacente do link no Hero Web Part, que não inclui um atributo target definido como _blank. Este artigo explica exatamente por que isso acontece, como o SharePoint lida com a navegação por padrão e o que você pode fazer para que os links do Hero abram em uma nova guia.
Principais conclusões: Comportamento do link do Hero Web Part
- Propriedades do link do Hero Web Part: A caixa de diálogo do link não inclui uma caixa de seleção “Abrir em nova guia” — todos os links usam o destino padrão
_self. - Navegação de página moderna do SharePoint: A maioria dos web parts prontos para uso, incluindo o Hero, não força novas guias a menos que explicitamente codificado em uma solução personalizada.
- Solução alternativa usando formatação JSON ou ação personalizada: Você pode substituir o comportamento padrão editando a página no SharePoint Framework ou usando um web part de editor de script.
Como o Hero Web Part lida com links
O Hero Web Part é um componente de página moderna do SharePoint projetado para exibir até cinco blocos com imagens, texto e um link. Ao adicionar um link a um bloco do Hero, você fornece uma URL através da caixa de diálogo do seletor de links. Essa caixa de diálogo aceita apenas uma URL — não oferece nenhuma opção para controlar a janela ou guia de destino. O SharePoint aplica o comportamento padrão do link para o elemento <a>, que é target="_self". Isso significa que a página vinculada carrega na mesma guia do navegador, substituindo a página atual. O web part não lê nenhum parâmetro de string de consulta ou metadados para alterar esse comportamento. Isso é consistente em todos os web parts modernos padrão do SharePoint, incluindo o web part Quick Links e o web part Button.
O motivo técnico
O Hero Web Part renderiza cada bloco como uma tag de âncora (<a>) com um atributo href apontando para a URL que você inseriu. A especificação HTML afirma que, se nenhum atributo target estiver presente, o navegador usa como padrão _self. O SharePoint não injeta um atributo target="_blank" porque o desenvolvedor do web part optou por não incluir essa opção no painel de propriedades. A Microsoft projetou o Hero Web Part para navegação dentro da página no mesmo conjunto de sites, assumindo que os usuários usariam o botão voltar do navegador ou a navegação do site para retornar. Adicionar uma opção de nova guia exigiria elementos de interface adicionais e aumentaria a complexidade de um componente que deveria ser simples e visual.
Passos para fazer um link do Hero Web Part abrir em uma nova guia
Como o Hero Web Part padrão não suporta o comportamento de nova guia, você deve usar um destes métodos alternativos. Cada método tem compensações em manutenção, segurança e experiência do usuário.
- Usar uma extensão personalizada do SharePoint Framework
Crie um Application Customizer do SharePoint Framework (SPFx) que seja executado em todas as páginas modernas. No código do customizer, use JavaScript para encontrar todos os links do Hero Web Part e adicionartarget="_blank"a cada tag de âncora. Isso requer Node.js, um editor de código e habilidades básicas de desenvolvimento SPFx. Implante a solução no catálogo de aplicativos e adicione o customizer ao seu site. Este método oferece controle total, mas requer recursos de desenvolvedor. - Substituir o Hero Web Part por um web part Quick Links
O web part Quick Links inclui uma propriedade chamada “Abrir links em nova guia” em seu painel de configurações. Edite sua página, remova o Hero Web Part e adicione um web part Quick Links. No painel de propriedades do web part, expanda a seção “Layout” e marque a caixa “Abrir links em nova guia”. Em seguida, adicione seus blocos manualmente. Este método é rápido e não requer código. A desvantagem é que o web part Quick Links não suporta o formato de imagem grande do Hero. - Adicionar um web part Script Editor com JavaScript personalizado
Insira um web part Script Editor (disponível na caixa de ferramentas da página moderna) abaixo do Hero Web Part. No editor de script, escreva um pequeno script que seja executado após o carregamento da página, selecione todos os links dos blocos do Hero e defina seu atributotargetcomo_blank. Exemplo de código:<script>document.querySelectorAll('.heroTile a').forEach(el => el.target = '_blank');</script>. Este método funciona imediatamente, mas pode quebrar se a Microsoft atualizar os nomes das classes CSS do Hero Web Part. - Usar um web part do SharePoint Framework com suporte a nova guia
Crie um Hero Web Part personalizado usando SPFx que inclua uma alternância no painel de propriedades para o comportamento de nova guia. Isso requer as mesmas habilidades de desenvolvimento SPFx do primeiro método, mas fornece um componente reutilizável. Você pode armazenar a preferência de nova guia em uma propriedade do web part e renderizar os links de acordo.
Equívocos comuns e soluções alternativas
Posso adicionar target=”_blank” na própria URL do link?
Não. Adicionar target="_blank" dentro do campo de URL, como https://exemplo.com" target="_blank, não funciona. O Hero Web Part trata toda a string como uma URL e tenta navegar para ela, resultando em um link quebrado. O atributo target é um atributo HTML na tag de âncora, não parte da URL.
Segurar Ctrl ou Shift enquanto clica altera o comportamento?
Sim. Os usuários podem pressionar e segurar a tecla Ctrl (Windows) ou Command (Mac) enquanto clicam no link para forçá-lo a abrir em uma nova guia. Da mesma forma, segurar Shift abre o link em uma nova janela. Isso é uma substituição em nível de navegador e funciona independentemente do atributo target. No entanto, você não pode confiar que todos os usuários conheçam ou lembrem desse atalho.
A Microsoft adicionará uma opção de nova guia em uma atualização futura?
A Microsoft não anunciou planos para adicionar uma opção de nova guia ao Hero Web Part. O web part permaneceu inalterado por vários anos. A solução alternativa recomendada pela documentação da Microsoft é usar o web part Quick Links quando você precisar do comportamento de nova guia. Se você precisar do impacto visual do Hero Web Part, deve usar um dos métodos personalizados descritos acima.
Comparação de comportamento de link: Hero Web Part vs Quick Links Web Part
| Item | Hero Web Part | Quick Links Web Part |
|---|---|---|
| Destino padrão do link | Mesma guia (_self) | Mesma guia (_self) a menos que configurado |
| Opção de nova guia nas configurações | Não disponível | Sim, em Layout > Abrir links em nova guia |
| Layout visual | Imagem grande do Hero com sobreposições | Grade compacta ou lista |
| Número máximo de blocos | 5 | Ilimitado |
| Código personalizado necessário para nova guia | Sim | Não |
Agora você pode escolher a melhor abordagem para seu site com base na comparação acima. Se preferir uma solução sem código, substitua o Hero Web Part pelo web part Quick Links e ative a opção Abrir links em nova guia. Se precisar do layout do Hero, use o web part Script Editor com JavaScript como uma solução rápida. Para uma correção permanente em todos os sites, invista em uma extensão SPFx personalizada que adicione suporte a nova guia a cada Hero Web Part em seu locatário.