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

Ce matin, un article demandait combien de personnes désactivaient JavaScript. Ensuite, j'ai commencé à me demander quelles techniques pourraient être utilisées pour déterminer si l'utilisateur l'a désactivé.

Quelqu'un connaît-il des moyens courts / simples de détecter si JavaScript est désactivé? Mon intention est d'avertir que le site n'est pas en mesure de fonctionner correctement sans que le navigateur ait activé JS.

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

Je suppose que vous essayez de décider de fournir ou non du contenu amélioré par JavaScript. Les meilleures implémentations se dégradent proprement, de sorte que le site fonctionne toujours sans JavaScript. Je suppose également que vous entendez la détection côté serveur , plutôt que d'utiliser l' <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. Il est également possible de définir un cookie à l'aide de JavaScript , puis de tester ce cookie à l'aide de scripts côté serveur lors des consultations de pages suivantes. Cependant, cela ne conviendrait pas pour décider du contenu à fournir, car il ne serait pas en mesure de distinguer les visiteurs sans cookie des nouveaux visiteurs ou des visiteurs qui bloquent les cookies.

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

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

Donc, ce que vous voulez vraiment, c'est une "redirection" vers une page qui dit "allumez JS, idiot". Mais, bien sûr, vous ne pouvez pas effectuer de redirection de méta de manière fiable. Alors, 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 le contenu de votre site est entouré 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 souhaitez 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.

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_pagelien - vous pouvez ajouter des paramètres ici afin 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 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 légèrement grossière, mais elle vous donnera une bonne idée en pourcentage pour votre base d'utilisateurs.

L'approche ci-dessus (suivi d'image) ne fonctionnera pas bien pour les navigateurs texte uniquement ou ceux qui ne prennent pas en charge du tout js, donc si votre base d'utilisateurs bascule principalement vers cette zone, ce n'est peut-être pas la meilleure approche.

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>

Si votre cas d'utilisation est que vous avez un formulaire (par exemple, un formulaire de connexion) et que votre script côté serveur doit 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 changera 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!

Je vous suggère de faire l'inverse en écrivant du JavaScript discret.

Faites fonctionner les fonctionnalités de votre projet 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

<noscript>n'est même pas nécessaire, et pour ne pas mentionner non pris en charge 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é, vous voyez le site. Sinon, 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 cela fonctionne, il est activé, sinon, ce n'est pas le cas ...

Utilisez une classe .no-js sur le corps et créez des styles non javascript basés sur la classe parente .no-js. Si javascript est désactivé, vous obtiendrez tous les styles non javascript, s'il existe 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 le passe-partout HTML5 http://html5boilerplate.com/ via modernizr mais vous pouvez utiliser une ligne de javascript pour remplacer les classes

les balises noscript sont correctes mais pourquoi avoir des trucs supplémentaires dans votre html quand cela peut être fait avec css

juste un peu dur mais (hairbo m'a donné l'idée)

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>

fonctionnerait dans tous les cas à droite? même si la balise noscript n'est pas prise en charge (seulement quelques css requis), quelqu'un connaît une solution non css?

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

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

Vous disposez également de la balise NOSCRIPT que vous pouvez utiliser pour afficher du texte pour les navigateurs avec JS désactivé.

Vous voudrez jeter un œil à la balise 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>

La balise noscript fonctionne bien, mais nécessitera chaque demande de page supplémentaire pour continuer à servir des fichiers JS inutiles, car essentiellement noscript est une vérification côté client.

Vous pouvez définir un cookie avec JS, mais comme quelqu'un l'a souligné, cela peut échouer. Idéalement, vous souhaitez pouvoir détecter le côté client JS, et sans utiliser de cookies, définissez un côté serveur de session pour cet utilisateur qui indique que JS est activé.

Une possibilité est d'ajouter dynamiquement une image 1x1 en utilisant JavaScript où l'attribut src est en fait un script côté serveur. Tout ce que ce script fait est enregistre dans la session utilisateur actuelle que JS est activé ($ _SESSION ['js_enabled']). Vous pouvez ensuite renvoyer une image vierge 1x1 vers le navigateur. Le script ne s'exécutera pas pour les utilisateurs dont JS est désactivé, et donc $ _SESSION ['js_enabled'] ne sera pas défini. Ensuite, pour les autres pages servies à cet utilisateur, vous pouvez décider d'inclure tous vos fichiers JS externes, mais vous voudrez toujours inclure la vérification, car certains de vos utilisateurs peuvent utiliser le module complémentaire NoScript Firefox ou avoir JS désactivé temporairement pour une autre raison.

Vous souhaiterez probablement inclure cette vérification quelque part près de la fin de votre page afin que la demande HTTP supplémentaire ne ralentisse pas le rendu de votre page.

Ajoutez ceci à la balise HEAD de chaque page.

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

Vous avez donc:

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

Merci à Jay.

Parce que je veux toujours donner au navigateur quelque chose de intéressant à regarder, j'utilise souvent cette astuce:

Tout d'abord, toute partie d'une page qui a besoin de JavaScript pour fonctionner correctement (y compris les éléments HTML passifs qui sont modifiés via les appels getElementById, etc.) est conçue pour être utilisable telle quelle en supposant qu'il n'y a pas de javaScript ISN'T disponible. (conçu comme s'il n'était pas là)

Tout élément nécessitant JavaScript, je place à l'intérieur d'une balise quelque chose comme:

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

Puis au début de mon document, j'utilise .onloadou document.readydans une boucle de getElementsByName('jsOnly')pour .style.display = "";réactiver les éléments dépendants de JS. De cette façon, les navigateurs non JS n'ont jamais besoin de voir les parties dépendantes JS du site, et s'ils l'ont, il apparaît immédiatement lorsqu'il est prêt.

Une fois que vous êtes habitué à cette méthode, il est assez facile d'hybrider votre code pour gérer les deux situations, bien que je ne fasse que tester la noscriptbalise et je m'attends à ce qu'elle présente des avantages supplémentaires.

Il s'agit de l'id de solution le plus "propre":

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

Une solution courante consiste à utiliser la balise META conjointement avec noscript pour actualiser la page et avertir le serveur lorsque JavaScript est désactivé, comme ceci:

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

Dans l'exemple ci-dessus, lorsque JavaScript est désactivé, le navigateur redirige vers la page d'accueil du site Web en 0 secondes. De plus, il enverra également le paramètre javascript = false au serveur.

Un script côté serveur tel que node.js ou PHP peut ensuite analyser le paramètre et savoir que JavaScript est désactivé. Il peut ensuite envoyer une version spéciale non JavaScript du site Web au client.

Si javascript est désactivé, votre code côté client ne s'exécutera pas de toute façon, je suppose donc que vous voulez que ces informations soient disponibles côté serveur. Dans ce cas, noscript est moins utile. Au lieu de cela, j'aurais une entrée cachée et utiliserais javascript pour remplir une valeur. Après votre prochaine demande ou publication, si la valeur est là, vous savez que javascript est activé.

Faites attention à des choses comme noscript, où la première demande peut afficher javascript désactivé, mais les demandes futures l'activeront.

Vous pouvez, par exemple, utiliser quelque chose comme document.location = 'java_page.html' pour rediriger le navigateur vers une nouvelle page chargée de scripts. Le fait de ne pas rediriger implique que JavaScript n'est pas disponible, auquel cas vous pouvez soit recourir aux utilitaires ro CGI, soit insérer le code approprié entre les balises. (REMARQUE: NOSCRIPT est uniquement disponible dans Netscape Navigator 3.0 et versions ultérieures.)

crédit http://www.intranetjournal.com/faqs/jsfaq/how12.html

Une technique que j'ai utilisée dans le passé consiste à utiliser JavaScript pour écrire un cookie de session qui agit simplement comme un indicateur pour dire que JavaScript est activé. Ensuite, le code côté serveur recherche ce cookie et s'il n'est pas trouvé, il prend les mesures appropriées. Bien sûr, cette technique repose sur l'activation des cookies!

Je pense que vous pourriez insérer une balise d'image dans une balise noscript et regarder les statistiques combien de fois votre site et combien de fois cette image a été chargée.

Les gens ont déjà publié des exemples qui sont de bonnes options pour la détection, mais en fonction de votre exigence de "avertir que le site ne peut pas fonctionner correctement sans que le navigateur ait activé JS". Vous ajoutez essentiellement un élément qui apparaît d'une manière ou d'une autre sur la page, par exemple les `` pop-ups '' sur Stack Overflow lorsque vous gagnez un badge, avec un message approprié, puis supprimez-le avec du Javascript qui s'exécute dès que la page est chargée ( et je veux dire le DOM, pas la page entière).

Le détecter dans quoi? JavaScript? Ce serait impossible. Si vous le souhaitez uniquement à des fins de journalisation, vous pouvez utiliser une sorte de schéma de suivi, où chaque page dispose de JavaScript qui demandera une ressource spéciale (probablement une très petite gifou similaire). De cette façon, vous pouvez simplement faire la différence entre les demandes de page uniques et les demandes de votre fichier de suivi.

Pourquoi ne mettez-vous pas simplement un gestionnaire d'événements onClick () détourné qui ne se déclenchera que lorsque JS est activé, et utilisez-le pour ajouter un paramètre (js = true) à l'URL cliquée / sélectionnée (vous pouvez également détecter une liste déroulante et changer la valeur - ajouter un champ de formulaire caché). Alors maintenant, lorsque le serveur voit ce paramètre (js = true), il sait que JS est activé, puis fait votre logique côté serveur.
L'inconvénient est que la première fois qu'un utilisateur accède à votre site, un signet, une URL, une URL générée par le moteur de recherche, vous devrez détecter qu'il s'agit d'un nouvel utilisateur, alors ne cherchez pas le NVP ajouté à l'URL, et le serveur devra attendre le prochain clic pour déterminer que l'utilisateur est activé / désactivé JS. En outre, un autre inconvénient est que l'URL se retrouvera sur l'URL du navigateur et si cet utilisateur marque ensuite cette URL, il aura le js = true NVP, même si l'utilisateur n'a pas activé JS, bien qu'au prochain clic, le serveur soyez sage de savoir si l'utilisateur a toujours activé JS ou non. Soupir .. c'est amusant ...

Pour forcer les utilisateurs à activer JavaScripts, j'ai défini l'attribut 'href' de chaque lien vers le même document, qui avertit l'utilisateur d'activer JavaScripts ou de télécharger Firefox (s'ils ne savent pas comment activer JavaScripts). J'ai stocké l'URL du lien réel vers l'attribut "nom" des liens et défini un événement global onclick qui lit l'attribut "nom" et y redirige la page.

Cela fonctionne bien pour ma base d'utilisateurs, bien qu'un peu fasciste;).

Vous ne détectez pas si l'utilisateur a désactivé javascript (côté serveur ou client). Au lieu de cela, vous supposez que javascript est désactivé et créez votre page Web avec javascript désactivé. Cela évite le besoin de noscript, que vous devriez éviter d'utiliser de toute façon car cela ne fonctionne pas tout à fait correctement et n'est pas nécessaire.

Par exemple, créez simplement votre site pour dire <div id="nojs">This website doesn't work without JS</div>

Ensuite, votre script fera simplement document.getElementById('nojs').style.display = 'none';son travail JS normal.

Vérifiez les cookies en utilisant une solution côté serveur pure que j'ai introduite ici, puis vérifiez le javascript en déposant un cookie à l'aide de Jquery.Cookie, puis vérifiez les cookies de cette façon u vérifiez les cookies et le javascript

Dans certains cas, le faire à l'envers pourrait être suffisant. Ajouter une classe en utilisant javascript:

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

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

Cela pourrait créer des problèmes de maintenance sur quelque chose de complexe, mais c'est une solution simple pour certaines choses. Plutôt que d'essayer de détecter quand il n'est pas chargé, il suffit de styliser en fonction du moment où il est chargé.

Je voudrais ajouter ma solution pour obtenir des statistiques fiables sur le nombre d'utilisateurs réels visitant mon site avec javascript désactivé sur le nombre total d'utilisateurs. La vérification est effectuée une seule fois par session avec les avantages suivants:

• Les utilisateurs visitant 100 pages ou seulement 1 sont comptés 1 chacun. Cela permet de se concentrer sur les utilisateurs uniques, pas sur les pages.
• Ne rompt pas le flux de page, la structure ou la sémantique de toute façon
• Pourrait enregistrer l'agent utilisateur. Cela permet d'exclure les bots des statistiques, tels que google bot et bing bot qui ont généralement JS désactivé! Pourrait également enregistrer l'adresse IP, l'heure, etc.
• Un seul contrôle par session (surcharge minimale)

Mon code utilise PHP, mysql et jquery avec ajax mais pourrait être adapté à d'autres langages:

Créez une table dans votre base de données comme celle-ci:

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;

Ajoutez ceci à chaque page après avoir utilisé session_start () ou équivalent (jquery requis):

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

Créez la page JSOK.php comme ceci:

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

J'ai trouvé une autre approche en utilisant css et javascript lui-même.
C'est juste pour commencer à bricoler les classes et les identifiants.

L'extrait CSS:
1. Créez une règle d'ID CSS et nommez-la #jsDis.
2. Utilisez la propriété "content" pour générer un texte après l'élément BODY. (Vous pouvez styler cela comme vous le souhaitez).
3 Créez une deuxième règle d'ID CSS et nommez-la #jsEn, puis stylisez-la. (par souci de simplicité, j'ai donné à ma règle #jsEn une couleur de fond différente.

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

L'extrait JavaScript:
1. Créez une fonction.
2. Saisissez l'ID BODY avec getElementById et affectez-le à une variable.
3. À l'aide de la fonction JS 'setAttribute', modifiez la valeur de l'attribut ID de l'élément BODY.

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

La partie HTML.
1. Nommez l'attribut d'élément BODY avec l'ID de #jsDis.
2. Ajoutez l'événement onLoad avec le nom de la fonction. (jsOn ()).

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

En raison de la balise BODY a reçu l'ID de #jsDis:
- Si Javascript est activé, il changera lui-même l'attribut de la balise BODY.
- Si Javascript est désactivé, il affichera le texte de la règle css 'content:'.

Vous pouvez jouer avec un conteneur #wrapper ou avec n'importe quel DIV qui utilise JS.

J'espère que cela vous aidera à comprendre l'idée.

Ajouter un rafraîchissement dans la méta à l'intérieur de noscript n'est pas une bonne idée.

1. Parce que la balise noscript n'est pas compatible XHTML

2. La valeur d'attribut "Refresh" n'est pas standard et ne doit pas être utilisée. "Actualiser" prend le contrôle d'une page loin de l'utilisateur. L'utilisation de "Refresh" entraînera un échec dans les directives d'accessibilité du contenu Web du W3C --- Référence http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .