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

j'aimerais 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 mettre en place une sorte de" ce site ne fonctionne pas si bien sans Javascript " message est que vous devez ensuite vous assurer que votre site fonctionne bien sans Javascript. Et une fois que vous avez commencé sur cette route, alors vous commencez à réaliser que le site devrait être à l'épreuve des balles avec JS éteint, et c'est un énorme morceau de des travaux supplémentaires.

donc, ce que vous voulez vraiment c'est une" redirection "vers une page qui dit"tournez sur JS, idiot". Mais, bien sûr, vous ne pouvez pas faire de méta redirections fiables. 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ù tous du contenu de votre site est emballé avec un div de la classe"pagecontainer". Le CSS à l'intérieur de la balise noscript masquera alors tout le contenu de votre page, et à la place afficher le message "no JS" que vous voulez montrer. 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>

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

si vous voulez une idée purement statistique de combien de vos utilisateurs ont javascript désactivé, vous pouvez faire quelque chose comme:

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

vérifier vos journaux d'accès de voir combien de fois cette image a été frappé. Une solution un peu rudimentaire, mais elle vous donnera un bon pourcentage d'idées pour votre base d'utilisateurs.

l'approche ci-dessus (suivi d'image) ne fonctionnera pas bien pour les navigateurs texte seulement ou ceux qui ne prennent pas en charge js du tout, donc si votre userbase balance principalement vers cette zone, ce ne peut pas être 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 votre script côté serveur doit savoir si L'Utilisateur a JavaScript activé, 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 d'aller dans l'autre sens en écrivant du JavaScript discret.

désactivez les fonctionnalités de votre projet pour les utilisateurs avec JavaScript, et lorsque vous avez terminé, mettez en œuvre vos améliorations JavaScript UI.

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

utiliser A. no-js class sur le corps et créer des styles non javascript basé sur .no-js parent class. Si javascript est désactivé, vous obtiendrez tous les styles javascript, s'il ya JS soutenir le .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");

trick used in HTML5 boilerplate http://html5boilerplate.com / par modernizr mais vous pouvez utiliser une ligne de javascript pour remplacer les classes

noscript balises sont ok, mais pourquoi avoir des trucs supplémentaires dans votre code html, quand il peut être fait avec css

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

Exemple Pratique :

<!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é, alors vous voyez le site. Si non, vous voyez alors le message "please enable JavaScript". la meilleure façon de vérifier si JavaScript est activé, est simplement d'essayer et d'utiliser JavaScript! si ça marche, c'est activé, si non, il n'est pas...

vous pouvez utiliser un simple js snippet pour définir la valeur d'un champ caché. Une fois de retour, vous savez si JS a été activé ou non.

ou vous pouvez essayer d'ouvrir une fenêtre popup que vous fermez rapidement (mais qui pourrait être visible).

vous avez aussi L'étiquette NOSCRIPT que vous pouvez utiliser pour afficher le texte pour les navigateurs avec JS désactivé.

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

vous pouvez mettre un cookie avec JS, mais comme quelqu'un d'autre a souligné, cela pourrait échouer. Idéalement, vous souhaitez être en mesure de détecter côté client JS, et sans utiliser de cookies, définir un côté serveur de session pour cet utilisateur qui indique que is JS est activé.

Une possibilité est de ajoutez dynamiquement une image 1x1 en utilisant JavaScript où l'attribut src est en fait un script côté serveur. Tout ce que fait ce script est sauvegardé dans la session utilisateur courante que JS est activé ($_SESSION['js_enabled']). Vous pouvez ensuite afficher une image vierge 1x1 dans le navigateur. Le script ne sera pas lancé pour les utilisateurs qui ont désactivé JS, et donc $_SESSION['js_enabled'] ne sera pas défini. Ensuite, pour d'autres pages servies à cet utilisateur, vous pouvez décider d'inclure tous vos fichiers JS externes, mais vous toujours vouloir inclure la vérification, puisque certains de vos utilisateurs pourraient utiliser L'add-on NoScript Firefox ou avoir désactivé js temporairement pour une autre raison.

vous voudrez probablement inclure cette vérification quelque part près de la fin de votre page afin que la requête HTTP supplémentaire ne ralentisse pas le rendu de votre page.

ajoutez ceci à l'étiquette de tête de chaque page.

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

donc vous avez:

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

avec les remerciements à Jay.

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

Parce que je veux toujours donner le navigateur quelque chose d'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 par des appels getElementById, etc.) sont conçus pour être utilisables tels quels, à supposer qu'il n'y ait pas de javaScript disponible. (conçu comme si elle n'était pas là)

tous les éléments qui nécessitent JavaScript, je place à l'intérieur d'une étiquette quelque chose comme:

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

puis, au début de mon document, j'utilise .onload ou document.ready dans une boucle de getElementsByName('jsOnly') pour mettre le .style.display = ""; en retournant les éléments dépendants JS. De cette façon, les navigateurs non-JS ne doivent jamais voir les parties dépendantes JS du site, et s'ils l'ont, il apparaît immédiatement quand il est prêt.

une fois que vous êtes habitué à cette méthode, il est assez facile d'hybrider votre code à Gérer les deux situations, bien que je ne fais que maintenant des expériences avec la balise noscript et je m'attends à ce qu'elle ait quelques avantages supplémentaires.

juste un peu difficile, mais l' (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>

marcherait dans tous les cas droit? même si la balise noscript n'est pas supportée (seulement quelques css requis) quelqu'un connaît une solution non css?

une solution courante consiste à utiliser la balise meta en conjonction avec noscript pour rafraîchir la page et aviser 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 seconde. En outre, il enverra également le paramètre javascript=false au serveur.

un script côté serveur tel qu'un noeud.js ou PHP peuvent alors analyser parameter et apprendre à 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 sera pas exécuté de toute façon, donc je suppose que vous voulez dire que vous voulez que l'information disponible côté serveur. Dans ce cas, noscript est moins utile. Au lieu de cela, j'aurais une entrée cachée et j'utiliserais javascript pour remplir une valeur. Après votre prochaine requête ou postback, si la valeur est là, vous savez que javascript est activé.

faites attention à des choses comme noscript, où la première requête peut montrer Javascript désactivé, mais les demandes futures l'allument.

il s'agit de la solution la plus" propre "utilisée:

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

vous pourriez, par exemple, utiliser quelque chose comme document.location = ' java_page.html ' pour rediriger le navigateur vers une nouvelle page chargée de scripts. L'échec de redirection implique que JavaScript n'est pas disponible, auquel cas vous pouvez soit recourir à CGI ro utines ou insérer le code approprié entre les étiquettes. (NOTE: NOSCRIPT n'est disponible qu'à partir de la version 3.0 de Netscape Navigator.)

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

une technique que j'ai utilisée dans le passé est D'utiliser JavaScript pour écrire un cookie de session qui agit simplement comme un drapeau pour dire que JavaScript est activé. Ensuite, le code côté serveur recherche ce cookie et, s'il n'est pas trouvé, 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 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à posté des exemples qui sont de bonnes options pour la détection, mais basé sur votre exigence de"donner avertissement que le site n'est pas en mesure de fonctionner correctement sans le navigateur ayant js activé". 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 le débordement de la pile lorsque vous gagnez un badge, avec un message approprié, puis supprimez ceci avec du Javascript qui s'exécute dès que la page est chargée (et je veux dire le DOM, pas l'ensemble page.)

le Détecter dans quoi? JavaScript? Ce serait impossible. Si vous le voulez juste pour des raisons de journalisation, vous pouvez utiliser une sorte de schéma de suivi, où chaque page a JavaScript qui fera une demande pour une ressource spéciale (probablement un très petit gif ou similaire). De cette façon, vous pouvez simplement prendre la différence entre les demandes de page uniques et les demandes pour votre fichier de suivi.

pourquoi ne pas simplement mettre un handler d'événement hijacked onClick() qui ne se déclenchera que lorsque JS est activé, et l'utiliser pour ajouter un paramètre (js=true) à L'URL cliquée/sélectionnée (vous pourriez également détecter une liste déroulante et changer la valeur - d'ajouter un champ de formulaire caché). Ainsi, lorsque le serveur voit ce paramètre (js = true), il sait que JS est activé et fait ensuite votre côté serveur logique.

L'inconvénient à cela est que la première fois qu'un utilisateur vient à votre site, Marque-page, URL, URL générée par le moteur de recherche - vous aurez besoin de détecter qu'il s'agit d'un nouvel utilisateur donc ne cherchez pas la NVP ajouté dans l'URL, et le serveur devrait attendre le prochain clic pour déterminer l'utilisateur est js activé/désactivé. En outre, un autre inconvénient est que L'URL finira sur L'URL du navigateur et si cet utilisateur marque alors cette URL il aura le JS = true NVP, même si l'utilisateur n'a pas js activé, bien que sur le prochain clic le serveur serait sage de savoir si L'utilisateur avait encore JS activé ou non. Soupir.. c'est un plaisir...

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é lien url de l'attribut "name" de liens et défini un mondial de l'événement onclick qui lit l'attribut 'name' et redirige la page.

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

vous ne détectez pas si javascript est désactivé (côté serveur ou client). Vous supposez plutôt que javascript est désactivé et vous construisez votre page Web avec javascript désactivé. Cela élimine la nécessité de noscript , que vous devriez éviter d'utiliser de toute façon parce qu'il ne fonctionne pas tout à fait bien et est inutile.

par exemple, il suffit de construire votre site pour dire <div id="nojs">This website doesn't work without JS</div>

alors, votre script fera simplement document.getElementById('nojs').style.display = 'none'; et fera normal JS entreprise.

vérifier les cookies en utilisant une solution purement côté serveur j'ai introduit ici puis vérifier javascript en laissant tomber un cookie en utilisant Jquery.Cookie et ensuite, vérifiez le témoin de cette façon, u vérifier pour les cookies et 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 tout ce qui est 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 style selon quand il est chargé.

j'ai trouvé une autre approche utilisant css et javascript lui-même.

C'est juste pour commencer à bricoler avec les classes et les id.

Le bout de code CSS:

1. Créez une règle D'identification 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 définir le style de ce que vous voulez).

3 Créer une 2e règle D'identification css et la nommer #jsEn, et la styliser. (par souci de simplicité, j'ai donné à mon #jsEn règle 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éer une fonction.

2. Saisissez l'ID du corps avec geteelementbyid et assignez-le à une variable.

3. En utilisant la fonction JS 'setAttribute', changez la valeur de L'attribut ID de L'élément BODY.

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

the HTML partie.

1. Nommez l'attribut BODY element avec L'ID de #jsDis.

2. Ajoutez l'événement onLoad avec le nom de la fonction. (jsOn ()).

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

à cause de L'étiquette de corps a été donné L'ID de #jsDis:

- Si Javascript est enable, 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 quelle DIV qui utilise JS.



Espérons que cela aide à avoir l'idée.

Ajouter un rafraîchissement dans meta inside noscript n'est pas une bonne idée.

1. parce que noscript tag n'est pas compatible XHTML

2. l'attribut "Refresh" n'est pas standard et ne doit pas être utilisé. "Refresh" prend le contrôle d'une page loin de l'utilisateur. L'utilisation de "Refresh" causera 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 .

pour ceux qui veulent simplement savoir si js a été activé, pourquoi ne pas utiliser une routine ajax pour stocker l'état? Par exemple, j'enregistre tous les visiteurs/visites dans un ensemble de tables. Le champ JSenabled peut être défini par défaut à FALSE, et la routine ajax le définirait à TRUE, si JS est activé.