Question Comment détecter si JavaScript est désactivé?


Il y avait un post ce matin demandant combien de personnes désactivent JavaScript. Puis j'ai commencé à me demander quelles techniques pourraient être utilisées pour déterminer si l'utilisateur l'a désactivé.

Est-ce que quelqu'un connaît des moyens simples / courts pour détecter si JavaScript est désactivé? Mon intention est de donner un avertissement que le site n'est pas capable de fonctionner correctement sans que JS ne soit activé sur le navigateur.

Finalement, je voudrais les rediriger vers un contenu qui est capable de fonctionner en l'absence de JS, mais j'ai besoin de cette détection comme un espace réservé pour commencer.


610


origine


Réponses:


Je suppose que vous essayez de décider de fournir ou non du contenu optimisé pour JavaScript. Les meilleures implémentations se dégradent proprement, de sorte que le site fonctionne toujours sans JavaScript. Je suppose également que vous voulez dire la détection côté serveur, plutôt que d'utiliser le <noscript> élément pour une raison inexpliquée.

Il n'y a pas de bon moyen d'effectuer une détection JavaScript côté serveur. Comme alternative, il est possible de définir un cookie à l'aide de JavaScript, puis de tester ce cookie à l'aide de scripts côté serveur sur les pages vues suivantes. Cependant, cela ne serait pas approprié pour décider du contenu à livrer car il ne serait pas capable de distinguer les visiteurs sans le cookie des nouveaux visiteurs ou des visiteurs qui bloquent les cookies.


265



Je voudrais ajouter mon .02 ici. Ce n'est pas 100% à l'épreuve des balles, mais je pense que c'est assez bon.

Le problème, pour moi, avec l'exemple préféré de mettre en place une sorte de "ce site ne fonctionne pas si bien sans Javascript" est que vous devez alors vous assurer que votre site fonctionne bien sans Javascript. Et une fois que vous avez commencé cette route, alors vous commencez à réaliser que le site devrait être à l'épreuve des balles avec JS désactivé, et c'est tout un gros morceau de travail supplémentaire.

Donc, ce que vous voulez vraiment, c'est une "redirection" vers une page qui dit "allume JS, idiot". Mais, bien sûr, vous ne pouvez pas effectuer de redirections de méta de manière fiable. Donc, voici la suggestion:

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

...où tout du contenu de votre site est enveloppé d'un div de classe "pagecontainer". Le CSS à l'intérieur de la balise noscript masquera alors tout le contenu de votre page, et affichera à la place le message "no JS" que vous voulez afficher. C'est en fait ce que Gmail semble faire ... et si c'est assez bon pour Google, c'est assez bon pour mon petit site.


332



noscript les blocs sont exécutés lorsque JavaScript est désactivé, et sont généralement utilisés pour afficher un contenu alternatif à celui que vous avez généré en JavaScript, par exemple.

<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>

Les utilisateurs sans js obtiendront le next_page lien - vous pouvez ajouter des paramètres ici pour que vous sachiez sur la page suivante s'ils sont venus via un lien JS / non-JS, ou tenter de définir un cookie via JS, dont l'absence implique que JS est désactivé. Ces deux exemples sont assez triviaux et ouverts à la manipulation, mais vous avez l'idée.

Si vous voulez une idée purement statistique du nombre de vos utilisateurs qui ont désactivé javascript, vous pouvez faire quelque chose comme:

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

puis vérifiez vos journaux d'accès pour voir combien de fois cette image a été touchée. Une solution un peu grossière, mais qui vous donnera une bonne idée du pourcentage de votre base d'utilisateurs.

L'approche ci-dessus (suivi de l'image) ne fonctionnera pas bien pour les navigateurs texte seulement ou ceux qui ne supportent pas du tout js, donc si votre base utilisateur bascule principalement vers cette zone, cela peut ne pas être la meilleure approche.


189



C'est ce qui a fonctionné pour moi: il redirige un visiteur si javascript est désactivé

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

44



Si votre cas d'utilisation est que vous avez un formulaire (par exemple, un formulaire de connexion) et que votre script côté serveur a besoin de savoir si l'utilisateur a activé JavaScript, vous pouvez faire quelque chose comme ceci:

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

Cela va changer la valeur de js_enabled à 1 avant de soumettre le formulaire. Si votre script côté serveur obtient un 0, pas de JS. S'il obtient un 1, JS!


42



Je vous suggère de faire le contraire en écrivant JavaScript discret.

Faites en sorte que les fonctionnalités de votre projet fonctionnent pour les utilisateurs avec JavaScript désactivé, et lorsque vous avez terminé, implémentez vos améliorations de l'interface utilisateur JavaScript.

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


40



Utilisez une classe .no-js sur le corps et créez des styles non javascript basés sur la classe parent .no-js. Si javascript est désactivé, vous obtiendrez tous les styles non javascript, S'il y a un support JS, la classe .no-js sera remplacée en vous donnant tous les styles comme d'habitude.

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

astuce utilisée dans HTML5 passe-partout http://html5boilerplate.com/ par modernizr mais vous pouvez utiliser une ligne de javascript pour remplacer les classes

Les balises noscript sont correctes mais pourquoi avez-vous des trucs supplémentaires dans votre code quand cela peut être fait avec css


32



<noscript> n'est même pas nécessaire, et pour ne pas mentionner non supporté en XHTML.

Exemple de travail:

<!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>

Dans cet exemple, si JavaScript est activé, le site s'affiche. Si ce n'est pas le cas, le message "Veuillez activer JavaScript" s'affiche. La meilleure façon de tester si JavaScript est activé, est d'essayer simplement d'utiliser JavaScript! Si ça marche, c'est activé, sinon, ce n'est pas ...


26



Vous pouvez utiliser un simple extrait JS pour définir la valeur d'un champ masqué. Lors de la publication, vous savez si JS a été activé ou non.

Ou vous pouvez essayer d'ouvrir une fenêtre contextuelle que vous fermez rapidement (mais cela pourrait être visible).

Vous avez également le tag NOSCRIPT que vous pouvez utiliser pour afficher du texte pour les navigateurs avec JS désactivé.


12