fbpx

Como validar se o javascript está ativado no navegador do cliente - Evertec Digital | Blog

Como validar se o javascript está ativado no navegador do cliente

Hoje em dia é pouco comum, o javascript estar desativado no navegador visitantes do seu site, mas ainda assim, pode acontecer. Aqui iremos mostrar de um modo simples como validar se o javascript está ativado no navegador do cliente.

Compartilhe esse conteúdo!

Embora seja cada vez menos comum os visitantes do seu site, mantenham o javascript desativado em seus navegadores, ainda assim, existe essa possibilidade, que, dependendo da finalidade do seu site, pode afetar drasticamente nos resultados desejados e até mesmo, na segurança do mesmo.

Seja na validações de formulários, na navegação, na exibição de conteúdo em realtime, o javascript é um recurso chave para o bom funcionamento de muitos sites na web.

Vulnerabilidade

Nem sempre o javascript estará desativado porque o usuário quer se ver livre dos anúncios e outros widgets impertinentes. Pode ser que que o visitante do seu site, o desative para testar a vulnerabilidade do mesmo.

Muitos desenvolvedores, acabam confiando exclusivamente no javascript e o html para a validação de formulários via Client Side, devido a facilidade que muitos plugins e bibliotecas javascript trazem nessa atividade, com isso, acabam negligenciando a validação via Server Side, colocando em risco a segurança dos projetos web.

Outro ponto é que, se o formulário do seu site é gerenciado via um controlador Ajax, é possível que ele nem mesmo funcione, pois é comum esse tipo de formulário o atributo action estar vazio, tendo o envio tratado exclusivamente pelo controlador. Essa característica resulta em outro problema por falta do javascript.

Usabilidade

Se o javascript está sendo utilizado com recursos de gestão de conteúdo, como exibição dinâmica em Realtime, será necessário criar meios de contornar o problema para que esse conteúdo possa ser exibido, caso o javascript esteja desativado.

Exemplo:

Se no seu site tem um sistema de paginação por carregamento automático de conteúdo ao rolar a página, ou ainda, um botão de “Carregar Mais” que fará a consulta com Ajax/jSon, entregando post mais antigos para o visitante do seu site, isso será um problema enorme se o javascript do navegador estiver desativado.

Nesse caso você precisará criar uma dualidade de navegação, criando uma validação que permitirá ter um sistema de paginação disponível para o caso do javascript estar desativado.

Como validar se o javascript está ativado

No contexto utilizado no exemplo anterior, podemos lhe dar uma ajudinha. Apenas com CSS e um pequeno código, poderemos contornar essa situação. O processo é extremamente simples, vamos aos passos:

  1. Crie o script de exibição de conteúdo realtime, ativado por scroll ou através de um botão “Carregar Mais“;
  2. Crie também o sistema de paginação manual, como se não houve o sistema de exibição em realtime, colocando no local desejado;
  3. No css crie uma arvore de estilo que ocultará a paginação caso o Javascript esteja ativado. Exemplo:
    .js .paginator{display: none;}
  4. Finalizando,  adicione o script abaixo, logo depois da tag <body>:
<script type="text/javascript">
   document.documentElement.className += ' js ';
</script>

O script acima, adicionará a classe  ‘ js ‘ na tag html do seu site, porém, somente caso o javascript esteja ativado. Com isso você poderá utilizar essa classe para tratar os elementos do seu site via css.

É importante, notar que há um espaço antes e depois do ‘js’ na classe, isso é necessário como uma forma de prevenção, para o caso do CMS que você estiver utilizando (caso esteja usando um), adicione outras classes automaticamente nessa tag também. Veja o resultado abaixo:

<!DOCTYPE html>
<html class=' js '>
...

Existem várias situações que a exibição de conteúdo pode demandar esse tipo de prevenção para garantir que todos que acessem seu site, possa ter uma experiencia de usabilidade satisfatória, mesmo que o javascript esteja desativado.

Tem uma outra solução para essa situação? Deixe nos comentários, para mantermos o conteúdo sempre atualizado!


Compartilhe esse conteúdo!

Conteúdos Relacionados

Veja alguns conteúdos que também podem lhe interessar.

Mais Populares

Veja os nossos conteúdos mais acessados.