Códigos JavaScript para controlar o navegador


Se você é programador front-end, você deve ter recebido um pedido para fazer algo que o usuário poderia fazer no próprio navegador, ou que não é para ele poder fazer pelo navegador. Com base nisso, eu montei uma pequena lista de trechos de códigos (snippets) que já utilizei para fazer algo nesse estilo.


Como avançar e voltar páginas navegadas

<a href="javascript:history.back()">Voltar</a> | <a href="javascript:history.forward()">Avançar</a>

Esse é um comando bem simples, pessoalmente só precisei usar o voltar em uma tela de erro de post pois no teste de usabilidade alguns usuários fecharam o navegador ao invés de clicar em voltar. Parece bobo, mas em alguns casos a redundância faz com que a pessoa sinta mais confiança no app.


Imprimir a página

<a href="javascript:window.print();">Imprimir</a>

O botão imprimir, acho que é mais usado com o ícone da impressora do que com o texto. Mas vou deixar o texto ali acima para ser o mínimo de código possível.

Em alguns casos é legal combinar ele com a media query @print do CSS, assim da para remover alguns itens indesejados. Mas se você é fã de fazer o máximo possível em JS, daí seria interessante talvez chamar uma função onclick e processar alguma coisa antes de chamar o window.print().


Evitar a navegação

<a href="JavaScript:Void(0);">Um link</a>

O void(0) retorna undefined e com isso ele evita que, por exemplo, ocorra a navegação. É bem útil caso você queira aproveitar o link para fazer coisas que um botão faz, mas não quer que a página recarregue a cada clique.


Redirecionar a página após um tempo

setTimeout(window.location.href = 'https://mundojs.com.br/', 3000);

Apesar de ser possível fazer através do htacess ou do html, existem casos que é melhor dar um tempo antes de redirecionar, talvez para mostrar uma mensagem, ou até mesmo redirecionar em casos específicos (ifs ifs e mais ifs). Por isso, usar o setTimeout é uma boa opção, além de ele funcionar uma thread separada que não trancará o código, ele permite que você de um tempo para a pessoa ler o que será redirecionada e o motivo.


Remover o clique com o botão direito

document.addEventListener('contextmenu', event => event.preventDefault());

Esse aqui deve ser o evento que mais causa discussão. Por um lado, ele é muito útil para prevenir que a maioria dos usuários normais possam usar o botão direito para copiar imagens, textos, etc…

Por outro lado, muito programadores veem isso como uma má prática por ser um desperdício de tempo pois não existe uma forma garantida de remover o acesso aos dos exibidos pelo navegador. Então a implementação pode ser vista como um trabalho que não vale a pena ser implementado.


Coclusão e contribuição

Isso aí, como sempre espero que esse código ajude outros e caso você queira contribuir com mais snippets, por favor coloque nos comentários que adicionarei assim que possível na lista. Até mais…

Deixe um comentário