web-dev-qa-db-fra.com

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 le désactivait.

Est-ce que quelqu'un connaît des méthodes simples/courtes pour détecter si JavaScript est désactivé? Mon intention est de vous avertir que le site ne peut pas fonctionner correctement sans le navigateur pour lequel JS est activé.

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

643
MikeJ

Je suppose que vous essayez de décider de diffuser 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 une détection côté serveur plutôt que d'utiliser l'élément <noscript> pour une raison inexpliquée.

Il n’existe pas de méthode efficace pour effectuer une détection JavaScript côté serveur. Alternativement, il est possible de définir un cookie à l'aide de JavaScript, puis de tester ce cookie à l'aide d'un script côté serveur lors des vues de page suivantes. Toutefois, cela ne conviendrait pas pour décider du contenu à diffuser, car il ne serait pas possible de distinguer les visiteurs sans le cookie des nouveaux visiteurs ou des visiteurs qui bloquent les cookies.

280
Marc Gear

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

Le problème, pour moi, avec l'exemple préféré de mettre en place une sorte de message "Ce site ne fonctionne pas aussi bien sans Javascript" est que vous devez ensuite vous assurer que votre site fonctionne correctement sans Javascript. Et une fois que vous avez commencé sur cette voie, vous réalisez alors que le site doit être à l'épreuve des balles et que JS est désactivé, ce qui représente une somme considérable 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 faire de manière fiable des redirections méta. 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 du contenu de votre site est entouré d'un div de classe "pagecontainer". Le code CSS contenu dans la balise noscript masque alors tout le contenu de votre page et affiche le message "no JS" que vous souhaitez afficher. C’est en fait ce que Gmail semble faire ... et si c’est suffisant pour Google, c’est suffisant pour mon petit site.

353
hairbo

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 recevront le lien next_page - vous pouvez y ajouter des paramètres pour savoir à la page suivante s’ils sont arrivés via un lien JS/non-JS ou si vous souhaitez installer un cookie via JS, l'absence de ce qui 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 dont le javascript est désactivé, vous pouvez faire quelque chose comme:

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

puis consultez vos journaux d’accès pour voir combien de fois cette image a été touchée. Une solution légèrement rudimentaire, mais cela vous donnera une bonne idée en termes de pourcentage pour votre base d'utilisateurs.

L'approche ci-dessus (suivi des images) ne fonctionnera pas bien pour les navigateurs texte ou ceux qui ne prennent pas en charge js du tout. Par conséquent, si votre base d'utilisateurs bascule principalement vers cette zone, il se peut que cette approche ne soit pas la meilleure.

196
ConroyP

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

Si votre cas d'utilisation est que vous ayez un formulaire (par exemple, un formulaire de connexion) et que votre script côté serveur ait besoin de savoir si l'utilisateur a activé JavaScript, vous pouvez procéder comme suit:

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

Cela modifiera la valeur de js_enabled en 1 avant de soumettre le formulaire. Si votre script côté serveur obtient un 0, aucun JS. Si c'est 1, JS!

44
Andrew Hedges

Je vous conseillerais de faire l'inverse en écrivant du JavaScript discret.

Exploitez 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

42
cllpse

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 existe une prise en charge de JS, la classe .no-js sera remplacée, ce qui vous donnera tous les styles comme d'habitude.

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

astuce utilisée dans HTML5 boilerplate 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 du contenu supplémentaire dans votre code HTML lorsque cela est possible avec css

33
Abuzzy

<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 est affiché. Sinon, le message "Veuillez activer JavaScript" apparaît. Le meilleur moyen de vérifier si JavaScript est activé, est simplement d'essayer d'utiliser JavaScript! Si cela fonctionne, il est activé, sinon, ce n'est pas ...

32
de Raad

Vous pouvez utiliser un extrait de code JS simple pour définir la valeur d'un champ masqué. Une fois posté, 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 peut être visible).

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

13
rslite

Vous voudrez jeter un oeil à 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>
13
anon

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 non? même si la balise noscript n'est pas supportée (seulement quelques CSS nécessaires), quelqu'un connaît-il une solution non CSS?

13
borrel

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

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

Une possibilité consiste à ajouter de manière dynamique une image 1x1 à l'aide de JavaScript, l'attribut src étant en réalité un script côté serveur. Tout ce script ne fait que sauvegarder dans la session utilisateur en cours l'activation de JS ($ _SESSION ['js_enabled']). Vous pouvez ensuite générer une image vierge 1x1 vers le navigateur. Le script ne s'exécutera pas pour les utilisateurs pour lesquels JS est désactivé. Par conséquent, $ _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 voudrez toujours inclure la vérification, car certains de vos utilisateurs utilisent peut-être l'add-on NoScript Firefox ou ont JS. désactivé temporairement pour une autre raison.

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

12
David Wees

Ajoutez ceci à la balise HEAD 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>

Merci à Jay.

12
the_seeker_who

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

Tout d'abord, toute partie d'une page nécessitant le bon fonctionnement de JavaScript (y compris les éléments HTML passifs modifiés à l'aide d'appels getElementById, etc.) est conçue pour être utilisable telle quelle en supposant que le javaScript n'est pas disponible. (conçu comme si ce n'était pas là)

Tous les éléments nécessitant du JavaScript, je place dans une balise quelque chose comme:

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

Ensuite, au début de mon document, j'utilise .onload ou document.ready dans une boucle de getElementsByName('jsOnly') pour régler le .style.display = ""; et réactiver les éléments dépendants de JS. De cette façon, les navigateurs non-JS ne doivent jamais voir les parties du site dépendant de JS, 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 pour gérer les deux situations, bien que je n’expérimente que maintenant avec la balise noscript et qu’elle présente quelques avantages supplémentaires.

11
Brian

Une solution courante consiste à mettre la balise Meta en conjonction 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 sera redirigé vers la page d'accueil du site Web dans un délai de 0 secondes. De plus, le paramètre javascript = false sera envoyé au serveur.

Un script côté serveur, tel que node.js ou PHP, peut alors 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.

9
Umesh Patil

C’est la solution la 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>
9
Alpha2k

Si javascript est désactivé, votre code côté client ne fonctionnera pas, alors je suppose que vous voulez dire 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 renseigner 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 requête peut indiquer que javascript est désactivé, mais que les requêtes futures l'activent.

8
Joel Coehoorn

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. L'absence de redirection implique que JavaScript soit indisponible. Dans ce cas, vous pouvez soit recourir aux roûts 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

5
Brad8118

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

4
John Topley

Je pense que vous pouvez insérer une balise d'image dans une balise noscript et consulter les statistiques du nombre de fois où votre site et de la fréquence de chargement de cette image.

4
MrVolley

Les gens ont déjà posté des exemples qui constituent de bonnes options de détection, mais qui répondent à votre exigence de "avertir que le site ne peut pas fonctionner correctement sans le navigateur pour lequel JS est activé". Vous ajoutez en gros un élément qui apparaît en quelque sorte sur la page, par exemple les "fenêtres contextuelles" sur Débordement de pile lorsque vous gagnez un badge, avec un message approprié, puis supprimez cet élément avec du Javascript qui s'exécute dès que la page est chargée ( et je parle du DOM, pas de la page entière).

4
roryf

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

3
pouya

Détectez-le dans quoi? JavaScript? Ce serait impossible. Si vous le souhaitez uniquement à des fins de journalisation, vous pouvez utiliser une sorte de système de suivi dans lequel chaque page dispose de JavaScript qui demande une ressource spéciale (probablement un très petit gif ou similaire). De cette façon, vous pouvez simplement distinguer les demandes de page uniques des demandes de votre fichier de suivi.

3
Hank Gay

J'aimerais ajouter ma solution pour obtenir des statistiques fiables sur le nombre d'utilisateurs réels visitant mon site avec l'option JavaScript désactivée sur le nombre total d'utilisateurs. Le contrôle est effectué une 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 des utilisateurs uniques, pas sur des pages.
  • Ne coupe pas le flux de page, la structure ou la sémantique de toute façon
  • Peut enregistrer l'agent utilisateur. Cela permet d’exclure les robots des statistiques, tels que google bot et bing bot pour lesquels JS est généralement désactivé! Pourrait également enregistrer l'adresse IP, l'heure, etc ...
  • Juste une vérification par session (surcharge minimale)

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

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 son é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()) . "'");
3
Unbroken

Vous ne détectez pas si l'utilisateur a javascript désactivé (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 de toute façon, car cela ne fonctionne pas très bien et est inutile.

Par exemple, construisez 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'; et poursuivra ses activités normales avec JS.

3
Explosion Pills

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 pour tout ce qui est complexe, mais c'est une solution simple à certaines choses. Plutôt que d'essayer de détecter le moment où il n'est pas chargé, vous n'avez que le style en fonction de son chargement.

3
Jennifer Michelle

J'ai trouvé une autre approche utilisant css et javascript.
Ceci est juste pour commencer à bricoler avec les classes et les identifiants.

L'extrait CSS:
1. Créez une règle d'ID de 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'identifiant CSS, nommez-la #jsEn et stylisez-la. (Par souci de simplicité, j’ai donné à ma règle #jsEn une couleur d’arrière-plan 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 de code JavaScript:
1. Créer une fonction.
2. Récupérez 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 modifiera 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 tout DIV utilisant JS.

J'espère que cela vous aidera à comprendre.

3
Chris Pesoa

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 dans l'attribut 'name' des liens et défini un événement global onclick qui lit l'attribut 'name' et redirige la page à cet emplacement.

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

3
Jan Sahin

Pourquoi ne pas simplement mettre un gestionnaire d'événement onClick () détourné qui ne se déclenchera que lorsque JS est activé, et l'utiliser pour ajouter un paramètre (js = true) à l'URL cliqué/sélectionné (vous pouvez également détecter une liste déroulante et changez la valeur - ajoutez un champ de formulaire caché). Alors maintenant, quand le serveur voit ce paramètre (js = true), il sait que JS est activé et fait ensuite votre logique sophistiquée côté serveur.
L'inconvénient, c'est que la première fois qu'un utilisateur visite votre site, marque-pages, URL, URL générée par le moteur de recherche, vous devez détecter qu'il s'agit d'un nouvel utilisateur. Ne recherchez donc pas la NVP. ajouté à l'URL et le serveur devrait attendre le prochain clic pour déterminer si JS est activé/désactivé. En outre, un autre inconvénient est que l'URL se retrouvera sur l'URL du navigateur. Si cet utilisateur marque ensuite cet URL, il aura le js = true NVP, même si l'utilisateur n'a pas activé JS, bien que lors du prochain clic, le serveur sage de savoir si JS est toujours activé ou non. Soupir .. c'est amusant ...

3
FirstSOURCE

le code à l'intérieur de <noscript> balises sera exécuté s'il n'y a pas de js activé dans le navigateur. nous pouvons utiliser les balises noscript pour afficher le message afin d'activer JS comme ci-dessous .<noscript> <h1 style="text-align: center;">enable Java script and reload the page</h1> </noscript> tout en gardant le contenu de notre site Web masqué. comme ci-dessous

<body>
<div id="main_body" style="display: none;">
website content.
</div>
</body>

maintenant, si JS est activé, vous pouvez simplement rendre le contenu de votre main_body visible comme ci-dessous

<script type="text/javascript">
document.getElementById("main_body").style.display="block";
</script>
2
Pavan Kumar

Ajouter une actualisation dans la méta dans noscript n'est pas une bonne idée.

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

  2. La valeur d'attribut "Actualiser" n'est pas standard et ne doit pas être utilisée. "Actualiser" enlève le contrôle d'une page à l'utilisateur. L'utilisation de "Actualiser" provoquera un échec dans les règles d'accessibilité du contenu Web du W3C - Référence http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .

2
Gaurav Talwar

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

2
birchy

Voici la torsion! Il peut y avoir des navigateurs clients avec Javascript activé et qui utilisent des navigateurs compatibles JS. Mais pour quelle que soit la raison, Javascript ne fonctionne pas dans le navigateur (ex: paramètres du pare-feu). Selon les statistiques, cela se produit tous les 1 scénario sur 93. Donc, le serveur détecte que le client est capable d'exécuter Javascript, mais en réalité il ne le fait pas!

Comme solution, je suggère que nous installions un cookie dans le site client, puis que nous le lisions depuis le serveur. Si le cookie est défini, JS fonctionne correctement. Des pensées ?

Voici un script PHP qui peut être inclus une fois avant toute sortie. Ce n'est pas parfait, mais cela fonctionne assez bien dans la plupart des cas pour éviter de fournir du contenu ou du code qui ne sera pas utilisé par le client. Les commentaires en-tête expliquent comment cela fonctionne.

<?php
/*****************************************************************************
 * JAVASCRIPT DETECTION                                                      *
 *****************************************************************************/

// Progressive enhancement and graceful degradation are not sufficient if we
// want to avoid sending HTML or JavaScript code that won't be useful on the
// client side.  A normal HTTP request will not include any explicit indicator
// that JavaScript is enabled in the client.  So a "preflight response" is
// needed to Prompt the client to provide an indicator in a follow-up request.
// Once the state of JavaScript availability has been received the state of
// data received in the original request must be restored before proceding.
// To the user, this handshake should be as invisible as possible.
// 
// The most convenient place to store the original data is in a PHP session.
// The PHP session extension will try to use a cookie to pass the session ID
// but if cookies are not enabled it will insert it into the query string.
// This violates our preference for invisibility.  When Javascript is not
// enabled the only way to effect a client side redirect is with a "meta"
// element with its "http-equiv" attribute set to "refresh".  In this case
// modifying the URL is the only way to pass the session ID back.
//
// But when cookies are disabled and JavaScript is enabled then a client side
// redirect can be effected by setting the "window.onload" method to a function
// which submits a form.  The form has a "method" attribute of "post" and an
// "action" attribute set to the original URL.  The form contains two hidden
// input elements, one in which the session ID is stored and one in which the
// state of JavaScript availability is stored.  Both values are thereby passed
// back to the server in a POST request while the URL remains unchanged.  The
// follow-up request will be a POST even if the original request was a GET, but
// since the original request data is restored, the containing script ought to
// process the request as though it were a GET.

// In order to ensure that the constant SID is defined as the caller of this
// script would expect, call session_start if it hasn't already been called.
$session = isset($_SESSION);
if (!$session) session_start();

// Use a separate session for Javascript detection.  Save the caller's session
// name and ID.  If this is the followup request then close the caller's
// session and reopen the Javascript detection session.  Otherwise, generate a
// new session ID, close the caller's session and create a new session for
// Javascript detection.
$session_name = session_name();
$session_id = session_id();
session_write_close();
session_name('JS_DETECT');
if (isset($_COOKIE['JS_DETECT'])) {
    session_id($_COOKIE['JS_DETECT']);
} elseif (isset($_REQUEST['JS_DETECT'])) {
    session_id($_REQUEST['JS_DETECT']);
} else {
    session_id(sha1(mt_Rand()));
}
session_start();

if (isset($_SESSION['_SERVER'])) {
    // Preflight response already sent.
    // Store the JavaScript availability status in a constant.
    define('JS_ENABLED', 0+$_REQUEST['JS_ENABLED']);
    // Store the cookie availability status in a constant.
    define('COOKIES_ENABLED', isset($_COOKIE['JS_DETECT']));
    // Expire the cookies if they exist.
    setcookie('JS_DETECT', 0, time()-3600);
    setcookie('JS_ENABLED', 0, time()-3600);
    // Restore the original request data.
    $_GET = $_SESSION['_GET'];
    $_POST = $_SESSION['_POST'];
    $_FILES = $_SESSION['_FILES'];
    $_COOKIE = $_SESSION['_COOKIE'];
    $_SERVER = $_SESSION['_SERVER'];
    $_REQUEST = $_SESSION['_REQUEST'];
    // Ensure that uploaded files will be deleted if they are not moved or renamed.
    function unlink_uploaded_files () {
        foreach (array_keys($_FILES) as $k)
            if (file_exists($_FILES[$k]['tmp_name']))
                unlink($_FILES[$k]['tmp_name']);
    }
    register_shutdown_function('unlink_uploaded_files');
    // Reinitialize the superglobal.
    $_SESSION = array();
    // Destroy the Javascript detection session.
    session_destroy();
    // Reopen the caller's session.
    session_name($session_name);
    session_id($session_id);
    if ($session) session_start();
    unset($session, $session_name, $session_id, $tmp_name);
    // Complete the request.
} else {
    // Preflight response not sent so send it.
    // To cover the case where cookies are enabled but JavaScript is disabled,
    // initialize the cookie to indicate that JavaScript is disabled.
    setcookie('JS_ENABLED', 0);
    // Prepare the client side redirect used when JavaScript is disabled.
    $content = '0; url='.$_SERVER['REQUEST_URI'];
    if (!$_GET['JS_DETECT']) {
        $content .= empty($_SERVER['QUERY_STRING']) ? '?' : '&';
        $content .= 'JS_DETECT='.session_id();
    }
    // Remove request data which should only be used here.
    unset($_GET['JS_DETECT'],$_GET['JS_ENABLED'],
            $_POST['JS_DETECT'],$_POST['JS_ENABLED'],
            $_COOKIE['JS_DETECT'],$_COOKIE['JS_ENABLED'],
            $_REQUEST['JS_DETECT'],$_REQUEST['JS_ENABLED']);
    // Save all remaining request data in session data.
    $_SESSION['_GET'] = $_GET;
    $_SESSION['_POST'] = $_POST;
    $_SESSION['_FILES'] = $_FILES;
    $_SESSION['_COOKIE'] = $_COOKIE;
    $_SESSION['_SERVER'] = $_SERVER;
    $_SESSION['_REQUEST'] = $_REQUEST;
    // Rename any uploaded files so they won't be deleted by PHP.  When using
    // a clustered web server, upload_tmp_dir must point to shared storage.
    foreach (array_keys($_FILES) as $k) {
        $tmp_name = $_FILES[$k]['tmp_name'].'x';
        if (move_uploaded_file($_FILES[$k]['tmp_name'], $tmp_name))
            $_SESSION['_FILES'][$k]['tmp_name'] = $tmp_name;
    }
// Have the client inform the server as to the status of Javascript.
?>
<!DOCTYPE html>
<html>
<head>
    <script>
        document.cookie = 'JS_ENABLED=1';
// location.reload causes a confirm box in FireFox
//      if (document.cookie) { location.reload(true); }
        if (document.cookie) { location.href = location; }
    </script>
    <meta http-equiv="refresh" content="<?=$content?>" />
</head>
<body>
    <form id="formid" method="post" action="" >
        <input type="hidden" name="<?=$session_name?>" value="<?=$session_id?>" />
        <input type="hidden" name="JS_DETECT" value="<?=session_id()?>" />
        <input type="hidden" name="JS_ENABLED" value="1" />
    </form>
    <script>
        document.getElementById('formid').submit();
    </script>
</body>
</html>
<?php
    exit;
}
?>
1
David N. Jafferian

J'ai eu à résoudre le même problème hier, alors j'ajoute simplement mon .001 ici. La solution fonctionne pour moi ok au moins à la page d'accueil (index.php)

J'aime n'avoir qu'un seul fichier dans le dossier racine: index.php. Ensuite, j'utilise des dossiers pour structurer l'ensemble du projet (code, css, js, etc.). Donc, le code pour index.php est le suivant:

<head>
    <title>Please Activate Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
</head>

<body>

<script language="JavaScript">
    $(document).ready(function() {
        location.href = "code/home.php";
    });   
</script>

<noscript>
    <h2>This web site needs javascript activated to work properly. Please activate it. Thanks!</h2>
</noscript>

</body>

</html>

J'espère que cela aide quelqu'un. Meilleures salutations.

0
Jorge