3

Comumente costumo ver dois métodos principais para o redirecionamento do usuário para outra página, sendo eles:

HTML:

<a href="pt.stackoverflow.com">StackOverflow</a>

e

JavaScript:

window.location.href="http://pt.stackoverflow.com";

Afinal, qual a diferença entre eles? Existe um método mais seguro, rápido ou indicado ?

2 Respostas 2

3

Cara são tantas diferenças que fica até complicado entrar em muitos detalhes, mas vamos falar dessa imagem

inserir a descrição da imagem aqui

Na imagem acima vc consegue perceber que a primeira frase é um link? Muito provavelmente não, a não ser que o texto fosse clique aqui ou algo do tipo. Além disso, os leitores de tela tb não conseguem ler o caminho do link, então do ponto de vista da acessibilidade tb é ruim. Pois o link com JS, nem o focus ao apertar o tab ele recebe, assim como te não muda o tipo do cursor para pointer quando vc coloca o mouse encima.

Então um link em JS é menos acessível, provavelmente deve prejudicar o SEO, e é pouco intuitivo para o usuário comum, pois mesmo ele pode ter dificuldades em identificar um elemento clicável deito dessa forma prejudicando a UX

Veja por conta própria o comportamento de um e do outro, e como o usuário tem os feedback de um e do outro.

<p onclick="window.location.href='http://pt.stackoverflow.com'">link na tag "<" p ">" com onclick</p>
<a href="//pt.stackoverflow.com">link padrão com tag "<" a ">"</a>

Tirando isso ainda tem todas as outra propriedades que um elemento <a> tem por default, configurações de estilo do user-agente e pseudo classes como :active e :focus, vários atributos globais, e retro-compatibilidade e comportamento esperado em dispositivos mobile.

Então podendo usar um link normal, com a tag <a>, evite ao máximo usar window.location.href, a não ser que seja para um componente de slider ou galeria de imagem, que são componentes pouco acessíveis de qualquer forma e que pode não ser interessante para pessoas com deficiência visual etc. A preferencia sempre é do <a>

E por último, mas não menos importante, se optar por usar window.location.href lembre-se sempre de usar no elemento que vai ser clicável os atributos role e/ou aria-label para manter a acessibilidade, e adicionar tb um tabindex="0" para pode focar com o tab. Vc pode ler mais sobre esse nessa documentação da própria Mozilla https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role#Examples

Então se for fazer com JS seu HTML deveria ficar mais ou menos assim.

document.querySelector('div').onclick = function() {
    window.location.href = 'http://pt.stackoverflow.com'
}
div {
  color: blue;
  text-decoration: underline;
}
div:hover {
  cursor: pointer;
}
<div role="link" tabindex="0">isso é uma DIV clicável pelo JS e acessível</div>

1

Vou falar de forma simples. Costumo utilizar <a href="pt.stackoverflow.com">StackOverflow</a> quando preciso criar um link, por exemplo: clique aqui, e o usuário vai até o local desejado.

Porém com javascript window.location.href="http://pt.stackoverflow.com";, eu costumo utilizar para redirecionar para uma outra página desejada automaticamente, assim que o sistema realizar uma ação, seja ela de decisão, ou o que for necessário. Assim que concluída a ação eu peço para redirecionar automaticamente com o window.location.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .