Como detectar se o JavaScript está desactivado?
Alguém sabe de algumas formas curtas/simples de detectar se o JavaScript está desactivado? Minha intenção é dar um aviso de que o site não é capaz de funcionar corretamente sem o navegador ter JS habilitado.
[[1] eventualmente eu gostaria de redirecioná-los para o conteúdo que é capaz de trabalhar no ausência de JS, mas preciso desta detecção como substituto para começar.30 answers
<noscript> por uma razão inexplicável.
Não há uma boa maneira de realizar a detecção de JavaScript do lado do servidor. Como alternativa, é possível definir um cookie usando JavaScript, e então testar para esse cookie usando scripting do lado do servidor sobre vistas de página subsequentes. No entanto, isso não seria adequado para decidir que Conteúdo entregar, uma vez que não seria capaz de distinguir os visitantes sem o cookie de novos visitantes ou visitantes que estão bloqueando cookies.
O problema, para mim, com o exemplo preferido de colocar algum tipo de "este site não funciona tão bem sem Javascript" a mensagem é que você precisa então certifique-se de que o seu site funciona bem sem Javascript. E uma vez que você começou por essa estrada, então você começa a perceber que o site deve ser à prova de bala com JS desligado, e isso é um grande pedaço de adicional trabalhar.
Então, o que realmente queres é um "redireccionamento" para uma página que diz "liga o JS, tonto". Mas, claro, não se pode fazer redirecções de meta. Então, eis 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 do conteúdo do seu site está embrulhado com um div de classe "pagecontainer". O CSS dentro da tag noscript irá então esconder todo o conteúdo de sua página, e em vez disso exibir qualquer mensagem "no JS" que você quer mostrar. Isto é realmente o 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á desactivado, e são normalmente usados para mostrar conteúdo alternativo ao que você gerou no 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>
Os Utilizadores sem o js irão obter o link next_page - poderá adicionar parâmetros aqui para que saiba na próxima página se eles vieram através de uma ligação JS/não-JS, ou tentar definir um cookie através do JS, cuja ausência implica que o JS está desactivado. Ambos os exemplos são bastante triviais e abertos à manipulação, mas você já percebi.
Se quiser uma ideia puramente estatística de quantos dos seus utilizadores têm o javascript desactivado, pode fazer algo do género:
<noscript>
<img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
Depois verifique os seus registos de Acesso para ver quantas vezes esta imagem foi atingida. Uma solução um pouco crua, mas que lhe dará uma boa idéia percentual-sábio para a sua base de usuário.
A abordagem acima (rastreamento de imagens) não vai funcionar bem para Navegadores apenas de texto ou aqueles que não suportam js de todo, por isso, se o seu userbase balança principalmente em direcção a essa área, esta pode não ser a melhor abordagem.
<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
Se o seu caso de Utilização for o facto de ter um formulário (por exemplo, um formulário de autenticação) e o seu programa do lado do servidor necessitar de saber se o utilizador tem o JavaScript activo, poderá fazer algo do género:
<form onsubmit="this.js_enabled.value=1;return true;">
<input type="hidden" name="js_enabled" value="0">
<input type="submit" value="go">
</form>
Isto irá mudar o valor de js_enabled para 1 Antes de enviar o formulário. Se o teu script do lado do servidor tiver um 0, nada de JS. Se tiver um 1, JS!
Faça com que as funcionalidades do seu projecto funcionem para os utilizadores com o JavaScript desactivado, e quando terminar, implemente as suas UI-melhorias JavaScript.
Use uma classe. no-js no corpo e crie estilos não javascript baseados na classe .no-js pai. Se o javascript estiver desactivado, irá obter todos os estilos não javascript, se houver suporte JS a classe. no-js será substituída dando - lhe todos os estilos como de costume.
document.body.className = document.body.className.replace("no-js","js");
Truque usado em HTML5 boilerplate http://html5boilerplate.com/ através do modernizr, mas você pode usar uma linha de javascript para substituir as classes
As etiquetas de Noscript estão bem, mas porquê ter coisas extras? no seu html quando pode ser feito com css
<noscript> nem sequer é necessário, e para não mencionar que 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 activo, então você vê o site. Se não, então você verá a mensagem" por favor active JavaScript". a melhor maneira de testar se o JavaScript está activo, é simplesmente tentar e usar o JavaScript!Se funcionar, está activado, se não, então não está...
Pode usar um simples excerto de JS para definir o valor de um campo escondido. Quando enviado de volta você sabe se JS foi ativado ou não.
Ou pode tentar abrir uma janela que feche rapidamente (mas que possa estar visível).
Também tem a marca NOSCRIPT que pode usar para mostrar texto para navegadores com JS desactivados.
A marca noscript funciona bem, mas vai exigir que cada pedido de página adicional para continuar a servir arquivos JS inúteis, uma vez que essencialmente o noscript é uma verificação do lado do cliente.
Podes pôr um biscoito com JS, mas como alguém disse, isto pode falhar. Idealmente, você gostaria de ser capaz de detectar o lado cliente JS, e sem usar cookies, definir um lado servidor de sessão para esse usuário que indica que o JS está habilitado.Uma possibilidade é adicionar dinamicamente uma imagem 1x1 usando JavaScript where the src attribute is actually a server side script. Tudo o que este programa faz é gravar na sessão de utilizadores actual que o JS está activo ($_SESSION['js_ lended']). Você pode então enviar uma imagem em branco 1x1 de volta para o navegador. O programa não será executado para os utilizadores que tenham o JS desactivado, pelo que a $_SESSION['js_enabled'] não será definida. Em seguida, para mais páginas servidas a este usuário, você pode decidir se deve incluir todos os seus arquivos JS externos, mas você sempre vai querer incluir a verificação, uma vez que alguns de seus usuários podem estar usando o Add-on do Firefox NoScript ou ter JS desativado temporariamente por alguma outra razão.
Provavelmente irá querer incluir esta opção algures perto do fim da sua página para que o pedido HTTP adicional não atrase a renderização da sua página.
Adicione isto à etiqueta principal de cada página.
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
Então tens:
<head>
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
</head>
<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>
Porque eu sempre quero dar ao navegador algo que vale a pena olhar eu muitas vezes uso este truque:
Primeiro, qualquer parte de uma página que precise de JavaScript para executar corretamente (incluindo elementos passivos HTML que são modificados através de chamadas getElementById etc.) são projetados para serem utilizáveis como-é com a suposição de que não há javaScript disponível. (projetado como se não estivesse lá)
Qualquer elemento que requeira JavaScript, eu coloco dentro de uma etiqueta algo tipo:
<span name="jsOnly" style="display: none;"></span>
Então, no início do meu documento, uso .onload ou document.ready dentro de um laço de getElementsByName('jsOnly') para definir o .style.display = ""; para voltar a ligar os elementos dependentes da JS. Dessa forma, os navegadores não-JS nunca têm que ver as partes dependentes JS do site, e se eles têm, ele aparece imediatamente quando ele está pronto.
noscript e esperar que ele terá algumas vantagens adicionais.
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>
Uma solução comum é a meta tag em conjunto com o noscript para actualizar a página e notificar o servidor quando o JavaScript estiver desactivado, como isto:
<!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 desactivado, o navegador irá redireccionar para a página inicial do site em 0 segundos. Além disso, ele também irá enviar o parâmetro javascript=false para o servidor.
UM programa do lado do servidor, como o nó.js ou PHP podem então processar o parâmetro e vir a saber que JavaScript é desactivado. Ele pode então enviar uma versão especial não-JavaScript do site para o cliente.
Se o javascript estiver desactivado, o seu código do lado do cliente não irá correr de qualquer forma, por isso presumo que queira essa informação disponível do lado do servidor. Nesse caso, o noscript {[3] } é menos útil. Em vez disso, eu teria uma entrada escondida e usar javascript para preencher um valor. Após o seu próximo pedido ou postback, se o valor está lá você sabe que javascript Está ligado.
Tenha cuidado com coisas como o noscript, onde o primeiro pedido pode mostrar o javascript desactivado, mas os futuros pedidos ligam-no.
Esta é a solução mais" limpa " ID usar:
<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>
Você pode, por exemplo, usar algo como documento.location = ' java_page.html ' para redireccionar o navegador para uma página nova e carregada de programas. A falha de redirecionamento implica que o JavaScript está indisponível, caso em que você pode recorrer ao CGI ro utines ou Inserir código apropriado entre as tags. (NOTE: NOSCRIPT is only available in Netscape Navigator 3.0 and up.)
Crédito http://www.intranetjournal.com/faqs/jsfaq/how12.html
Uma técnica que eu usei no passado é usar JavaScript para escrever um cookie de sessão que simplesmente age como uma bandeira para dizer que JavaScript está habilitado. Em seguida, o código do lado do servidor procura por este cookie e se ele não for encontrado toma ação conforme apropriado. Claro que esta técnica depende de cookies que estão habilitados!
Eu acho que você poderia inserir uma marca de imagem em uma tag noscript e olhar para as estatísticas quantas vezes o seu site e quantas vezes esta 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 é capaz de funcionar corretamente sem que o navegador tenha JS ativado". Você basicamente adiciona um elemento que aparece de alguma forma na página, por exemplo o 'pop-ups' no fluxo de pilha quando você ganha um crachá, com uma mensagem apropriada, em seguida, remove isso com algum Javascript que corre assim que a página é carregada (e eu quero dizer o DOM, não o todo pagina).
gif Muito pequeno ou semelhante). Dessa forma você pode apenas levar a diferença entre pedidos de página única e pedidos para o seu arquivo de rastreamento.
Porque é que não coloca um controlador de eventos hijacked onClick () que só irá disparar quando o JS estiver activo, e usa isto para adicionar um parâmetro (js=true) ao URL seleccionado/clicado (Poderá também detectar uma lista e alterar o valor - de adicionar um campo de forma escondida). Então agora, quando o servidor vê este parâmetro (js = true) ele sabe que JS está habilitado e, em seguida, fazer o seu fancy logic server-side.
O lado baixo para isso é que a primeira vez que um usuário vem ao seu site, favorito, URL, pesquisa URL gerado pelo motor - terá de detectar que este é um novo utilizador, por isso não procure o NVP adicionado ao URL, e o servidor terá de esperar pelo próximo clique para determinar se o Utilizador está activo/desactivado. Além disso, outra desvantagem é que a URL vai acabar no URL do navegador e se este usuário, em seguida, favoritos Este URL que terá o js = verdadeiro NVP, mesmo se o Usuário não tem JS ativado, embora no próximo clique o servidor seria sábio em saber se o usuário ainda tinha JS activo ou não. Suspiro.. isto é divertido...
Para obrigar os utilizadores a activar os JavaScripts, configuro o atributo 'href' de cada ligação para o mesmo documento, que notifica o utilizador para activar os JavaScripts ou descarregar o Firefox (se não souberem como activar os JavaScripts). Armazenei o url real do link para o atributo ' name 'dos links e defini um evento onclick global que lê o atributo' name ' e redireciona a página lá.
[[1]isso funciona bem para a minha base de usuários, embora um pouco fascista;).Não detecta se o utilizador tem o javascript desactivado (lado servidor ou cliente). Em vez disso, assume que o javascript está desactivado e constrói a sua página web com o javascript desactivado. Isso evita a necessidade de {[[0]}, que você deve evitar usar de qualquer maneira, porque ele não funciona bem e é desnecessário.
Por exemplo, basta construir o seu site para dizer<div id="nojs">This website doesn't work without JS</div>
Então, o seu script vai simplesmente fazer {[[2]} e fazer o seu negócio normal de JS.
Verifique se existem 'cookies' usando uma solução do lado do servidor pura que introduziAqui e depois verifique se o javascript largou um 'cookie' usando o Jquery.Cookie e, em seguida, verificar para cookie desta forma u verificar para tanto cookies e javascript
// Jquery
$('body').addClass('js-enabled');
/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}
Isto é só para começar a mexer nas aulas e identificações.
O excerto do CSS:
1. Criar uma regra de ID css, e nomeá-lo #jsDis.
2. Use a propriedade "conteúdo" para gerar um texto após o elemento corpo. (Você pode Estilo isto como quiser).
3 Criar uma segunda regra css ID e nomeá-lo #jsEn, e estilizá-lo. (por uma questão de simplicidade, eu dei à minha regra #jsEn um fundo diferente cor.
<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 excerto de JavaScript:
1. Criar uma função.
2. Pega na identificação do corpo com o getElementById e atribui-a a uma variável.
3. Usando a função JS "setAttribute", alterar 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 do corpo com o ID de #jsDis.
2. Adicione o evento onLoad com o nome da função. (jsOn ()).
<body id="jsDis" onLoad="jsOn()">
Devido à marca de identificação do corpo foi dada a identificação de:
Porque a marca noscript não é compatível com o XHTML
O valor do atributo "Refresh" não é padrão, e não deve ser usado. "Refresh" tira o controle de uma página do Usuário. Usar o "Refresh" causará uma falha nas Diretrizes de acessibilidade de conteúdo Web do W3C --- Referência http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.