Como detectar se o JavaScript está desativado?

Houve um post nesta manhã perguntando sobre quantas pessoas desabilitam o JavaScript. Então comecei a me perguntar que técnicas poderiam ser usadas para determinar se o usuário a desativou.

Alguém conhece algumas maneiras curtas / simples de detectar se o JavaScript está desativado? Minha intenção é alertar que o site não pode funcionar corretamente sem que o navegador tenha o JS ativado.

Eventualmente, eu gostaria de redirecioná-los para o conteúdo capaz de funcionar na ausência de JS, mas preciso dessa detecção como espaço reservado para iniciar.

Presumo que você esteja tentando decidir se deve ou não entregar conteúdo aprimorado em JavaScript. As melhores implementações são degradadas de forma limpa, para que o site ainda funcione sem JavaScript. Suponho também que você queira dizer detecção no servidor , em vez de usar o <noscript>elemento por um motivo inexplicável.

Não há uma boa maneira de executar a detecção de JavaScript no servidor. Como alternativa, é possível definir um cookie usando JavaScript e testá-lo usando scripts do servidor nas visualizações de página subsequentes. No entanto, isso não seria adequado para decidir qual conteúdo entregar, pois não seria possível distinguir visitantes sem o cookie de novos visitantes ou visitantes que estão bloqueando os cookies.

Eu gostaria de adicionar o meu .02 aqui. Não é 100% à prova de balas, mas acho que é bom o suficiente.

O problema, para mim, com o exemplo preferido de criação de algum tipo de mensagem "este site não funciona tão bem sem Javascript" é que você precisa garantir que seu site funcione corretamente sem Javascript. E depois que você começa a seguir esse caminho, começa a perceber que o site deve ser à prova de balas com o JS desativado, e isso é uma grande parte do trabalho adicional.

Então, o que você realmente quer é um "redirecionamento" para uma página que diz "ative JS, bobo". Mas, é claro, você não pode fazer meta redirecionamentos de maneira confiável. Então, aqui está a sugestão:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... onde todo o conteúdo do seu site é agrupado com uma div da classe "pagecontainer". O CSS dentro da tag noscript oculta todo o conteúdo da sua página e exibe a mensagem "sem JS" que você deseja mostrar. Na verdade, é isso que o Gmail parece fazer ... e se é bom o suficiente para o Google, é bom o suficiente para o meu pequeno site.

noscript Os blocos são executados quando o JavaScript está desativado e geralmente são usados ​​para exibir conteúdo alternativo ao gerado em JavaScript, por exemplo,

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Usuários sem js obterão o next_pagelink - você pode adicionar parâmetros aqui para saber na próxima página se eles vieram através de um link JS / não-JS ou tentar definir um cookie via JS, cuja ausência implica JS está desabilitado. Ambos os exemplos são bastante triviais e abertos à manipulação, mas você entendeu.

Se você quiser ter uma idéia puramente estatística de quantos usuários têm o javascript desativado, faça algo como:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

em seguida, verifique seus logs de acesso para ver quantas vezes essa imagem foi atingida. Uma solução um pouco grosseira, mas fornecerá uma boa ideia em porcentagem para sua base de usuários.

A abordagem acima (rastreamento de imagem) não funcionará bem em navegadores somente texto ou naqueles que não suportam js; portanto, se sua base de usuários se direcionar principalmente para essa área, talvez essa não seja a melhor abordagem.

Isto é o que funcionou para mim: ele redireciona um visitante se o javascript estiver desativado

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

Se o seu caso de uso for um formulário (por exemplo, um formulário de login) e o script do lado do servidor precisar saber se o usuário tem o JavaScript ativado, você pode fazer algo assim:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

Isso alterará o valor de js_enabled para 1 antes de enviar o formulário. Se o script do lado do servidor obtiver um 0, nenhum JS. Se receber 1, JS!

Eu sugiro que você faça o contrário escrevendo JavaScript discreto.

Faça com que os recursos do seu projeto funcionem para usuários com o JavaScript desativado e, quando terminar, implemente os aprimoramentos da interface do usuário do JavaScript.

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

<noscript>nem é necessário e, para não mencionar, não é suportado em XHTML .

Exemplo de trabalho :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

Neste exemplo, se o JavaScript estiver ativado, você verá o site. Caso contrário, você verá a mensagem "Ative o JavaScript". A melhor maneira de testar se o JavaScript está ativado é simplesmente tentar usar o JavaScript! Se funcionar, está ativado, se não, então não é ...

Use uma classe .no-js no corpo e crie estilos não javascript com base na classe pai .no-js. Se o javascript estiver desativado, você obterá todos os estilos que não são javascript, se houver suporte a JS, a classe .no-js será substituída, fornecendo todos os estilos, como de costume.

 document.body.className = document.body.className.replace("no-js","js");

truque usado no boilerplate HTML5 http://html5boilerplate.com/ através do modernizr, mas você pode usar uma linha de javascript para substituir as classes

tags noscript estão bem, mas por que ter coisas extras no seu html quando isso pode ser feito com css

um pouco difícil, mas (hairbo me deu a idéia)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

funcionaria em qualquer caso, certo? mesmo se a tag noscript não for suportada (apenas alguns CSS necessários), alguém conhece uma solução que não seja CSS?

Você pode usar um snippet JS simples para definir o valor de um campo oculto. Quando postado de volta, você sabe se o JS foi ativado ou não.

Ou você pode tentar abrir uma janela pop-up que você fecha rapidamente (mas isso pode estar visível).

Além disso, você possui a tag NOSCRIPT que pode ser usada para mostrar texto para navegadores com o JS desativado.

Você vai querer dar uma olhada na tag noscript.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>

A tag noscript funciona bem, mas exigirá que cada solicitação de página adicional continue servindo arquivos JS inúteis, pois essencialmente noscript é uma verificação do lado do cliente.

Você pode definir um cookie com JS, mas como outra pessoa apontou, isso pode falhar. Idealmente, você gostaria de poder detectar o lado do cliente JS e, sem usar cookies, defina um lado do servidor de sessões para o usuário que indica que o JS está ativado.

Uma possibilidade é adicionar dinamicamente uma imagem 1x1 usando JavaScript, em que o atributo src é na verdade um script do lado do servidor. Tudo o que esse script faz é salvar na sessão atual do usuário que o JS está ativado ($ _SESSION ['js_enabled']). Você pode enviar uma imagem em branco 1x1 de volta para o navegador. O script não será executado para usuários com o JS desativado e, portanto, o $ _SESSION ['js_enabled'] não será definido. Para outras páginas veiculadas a esse usuário, você pode decidir se deseja incluir todos os seus arquivos JS externos, mas sempre desejará incluir a verificação, pois alguns de seus usuários podem estar usando o complemento NoScript Firefox ou ter JS desativado temporariamente por algum outro motivo.

Você provavelmente incluirá essa verificação em algum lugar próximo ao final da sua página, para que a solicitação HTTP adicional não diminua a velocidade da renderização da sua página.

Adicione isso à tag HEAD de cada página.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Então você tem:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Com agradecimentos a Jay.

Como sempre quero dar ao navegador algo que valha a pena olhar, costumo usar esse truque:

Primeiro, qualquer parte de uma página que precise de JavaScript para ser executada corretamente (incluindo elementos HTML passivos que são modificados por meio de chamadas getElementById etc.) é projetada para ser utilizável como está, com a suposição de que não há javaScript disponível. (projetado como se não estivesse lá)

Quaisquer elementos que exijam JavaScript, eu coloco dentro de uma tag algo como:

<span name="jsOnly" style="display: none;"></span>

Então, no início do meu documento, eu uso .onloadou document.readydentro de um loop de getElementsByName('jsOnly')para .style.display = "";ativar novamente os elementos dependentes de JS. Dessa forma, os navegadores que não são JS nem precisam ver as partes dependentes de JS do site e, se o tiverem, aparecerão imediatamente quando estiverem prontos.

Depois de se acostumar com esse método, é bastante fácil hibridizar seu código para lidar com ambas as situações, embora agora eu só esteja experimentando a noscripttag e espere que ela tenha algumas vantagens adicionais.

Este é o uso "mais limpo" do ID da solução:

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>

Uma solução comum é a metatag em conjunto com noscript para atualizar a página e notificar o servidor quando o JavaScript estiver desativado, desta forma:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

No exemplo acima, quando o JavaScript estiver desativado, o navegador será redirecionado para a página inicial do site em 0 segundos. Além disso, também enviará o parâmetro javascript = false para o servidor.

Um script do lado do servidor, como node.js ou PHP, pode analisar o parâmetro e saber que o JavaScript está desativado. Em seguida, ele pode enviar uma versão especial não JavaScript do site para o cliente.

Se o javascript estiver desativado, o código do lado do cliente não será executado de qualquer maneira, portanto, suponho que você queira que essas informações estejam disponíveis no servidor. Nesse caso, noscript é menos útil. Em vez disso, eu teria uma entrada oculta e usaria o javascript para preencher um valor. Após sua próxima solicitação ou postagem, se o valor estiver lá, você sabe que o javascript está ativado.

Cuidado com coisas como noscript, em que a primeira solicitação pode mostrar o javascript desativado, mas solicitações futuras a ativam.

Você pode, por exemplo, usar algo como document.location = 'java_page.html' para redirecionar o navegador para uma nova página carregada de script. A falha no redirecionamento implica que o JavaScript não está disponível; nesse caso, você pode recorrer aos recursos CGI ou inserir o código apropriado entre as tags. (NOTA: NOSCRIPT está disponível apenas no Netscape Navigator 3.0 e superior.)

credit http://www.intranetjournal.com/faqs/jsfaq/how12.html

Uma técnica que usei no passado é usar o JavaScript para escrever um cookie de sessão que simplesmente atua como um sinalizador para dizer que o JavaScript está ativado. Em seguida, o código do servidor procura esse cookie e, se não for encontrado, executa as ações conforme apropriado. É claro que esta técnica depende de cookies serem ativados!

Eu acho que você pode inserir uma tag de imagem em uma tag noscript e ver as estatísticas quantas vezes seu site e quantas vezes essa imagem foi carregada.

As pessoas já publicaram exemplos que são boas opções para detecção, mas com base no seu requisito de "avisar que o site não pode funcionar corretamente sem o navegador ter o JS ativado". Basicamente, você adiciona um elemento que aparece de alguma forma na página, por exemplo, os 'pop-ups' no estouro de pilha quando obtém um emblema, com uma mensagem apropriada, e o remove com algum Javascript que é executado assim que a página é carregada ( e quero dizer o DOM, não a página inteira).

Detectá-lo em quê? JavaScript? Isso seria impossível. Se você quiser apenas para fins de registro, poderá usar algum tipo de esquema de rastreamento, no qual cada página possui JavaScript que solicitará um recurso especial (provavelmente muito pequeno gifou semelhante). Dessa forma, você pode considerar a diferença entre solicitações de página exclusivas e solicitações para seu arquivo de rastreamento.

Por que você não coloca um manipulador de eventos onClick () seqüestrado que será acionado apenas quando o JS estiver ativado e use isso para anexar um parâmetro (js = true) ao URL clicado / selecionado (você também poderá detectar uma lista suspensa e altere o valor de adicionar um campo de formulário oculto). Então agora, quando o servidor vê esse parâmetro (js = true), ele sabe que o JS está ativado e, em seguida, faça sua lógica lógica do lado do servidor.
A desvantagem disso é que, na primeira vez em que um usuário acessa seu site, marcador, URL, URL gerado pelo mecanismo de pesquisa, será necessário detectar que esse é um novo usuário, portanto, não procure o NVP anexado ao URL, e o servidor precisaria aguardar o próximo clique para determinar se o usuário está com JS ativado / desativado. Além disso, outra desvantagem é que o URL terminará no URL do navegador e, se esse usuário marcar como favorito, ele terá o NVP js = true, mesmo se o usuário não tiver o JS ativado, embora no próximo clique o servidor seja prudente saber se o usuário ainda tinha o JS ativado ou não. Suspiro .. isso é divertido ...

Para forçar os usuários a habilitar o JavaScripts, defino o atributo 'href' de cada link para o mesmo documento, que notifica o usuário para habilitar o JavaScripts ou fazer o download do Firefox (se não souberem habilitar o JavaScripts). Eu armazenei o URL do link real no atributo 'name' dos links e defini um evento onclick global que lê o atributo 'name' e redireciona a página para lá.

Isso funciona bem para minha base de usuários, embora um pouco fascista;).

Você não detecta se o usuário tem o javascript desativado (servidor ou cliente). Em vez disso, você assume que o javascript está desativado e cria sua página da Web com o javascript desativado. Isso evita a necessidade noscript, que você deve evitar usar de qualquer maneira, porque não funciona muito bem e é desnecessário.

Por exemplo, basta criar seu site para dizer <div id="nojs">This website doesn't work without JS</div>

Então, seu script simplesmente executará document.getElementById('nojs').style.display = 'none';e continuará seu negócio normal de JS.

Verifique se há cookies usando uma solução pura do lado do servidor que apresentei aqui , verifique se há javascript soltando um cookie usando Jquery.Cookie e depois verifique se há cookies dessa maneira. U verifique se há cookies e javascript

Em alguns casos, fazê-lo ao contrário pode ser suficiente. Adicione uma classe usando javascript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

Isso pode criar problemas de manutenção em qualquer coisa complexa, mas é uma correção simples para algumas coisas. Em vez de tentar detectar quando não está carregado, apenas estilize de acordo com o momento em que está carregado.

Gostaria de adicionar minha solução para obter estatísticas confiáveis ​​sobre quantos usuários reais visitam meu site com o javascript desativado sobre o total de usuários. A verificação é feita apenas uma vez por sessão com os seguintes benefícios:

• Usuários que visitam 100 páginas ou apenas 1 são contados 1 cada. Isso permite focar em usuários únicos, não em páginas.
• Não interrompe o fluxo, a estrutura ou a semântica da página de qualquer maneira
• Pode registrar o agente do usuário. Isso permite excluir bots das estatísticas, como o google bot e o bing bot, que geralmente têm o JS desativado! Também poderia registrar IP, hora, etc ...
• Apenas uma verificação por sessão (sobrecarga mínima)

Meu código usa PHP, mysql e jquery com ajax, mas pode ser adaptado a outros idiomas:

Crie uma tabela no seu banco de dados como esta:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Adicione isso a todas as páginas depois de usar session_start () ou equivalente (é necessário o jquery):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Crie a página JSOK.php assim:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");

Eu descobri outra abordagem usando css e javascript em si.
Isso é apenas para começar a mexer com classes e IDs.

O trecho de CSS:
1. Crie uma regra de ID de CSS e chame-a de #jsDis.
2. Use a propriedade "content" para gerar um texto após o elemento BODY. (Você pode estilizar isso como desejar).
3 Crie uma segunda regra de ID de CSS e chame-a de #jsEn e estilize-a. (por uma questão de simplicidade, dei à minha regra #jsEn uma cor de plano de fundo diferente.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

O trecho de JavaScript:
1. Crie uma função.
2. Pegue o ID do CORPO com getElementById e atribua-o a uma variável.
3. Utilizando a função JS 'setAttribute', altere o valor do atributo ID do elemento BODY.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

A parte HTML.
1. Nomeie o atributo do elemento BODY com o ID de #jsDis.
2. Adicione o evento onLoad com o nome da função. (jsOn ()).

<body id="jsDis" onLoad="jsOn()">

Por causa da tag BODY, foi fornecido o ID de #jsDis:
- Se o Javascript estiver ativado, ele mudará sozinho o atributo da tag BODY.
- Se o Javascript estiver desativado, ele mostrará o texto da regra 'content:' da CSS.

Você pode brincar com um contêiner #wrapper ou com qualquer DIV que use JS.

Espero que isso ajude a entender a idéia.

Adicionar uma atualização no meta dentro do noscript não é uma boa ideia.

1. Como a tag noscript não é compatível com XHTML

2. O valor do atributo "Atualizar" não é padrão e não deve ser usado. "Atualizar" retira o controle de uma página do usuário. O uso de "Atualizar" causará uma falha nas Diretrizes de acessibilidade de conteúdo da Web do W3C --- Referência http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .