web-dev-qa-db-fra.com

Afficher le message si javascript est désactivé côté client à l'aide de la balise noscript

Je veux signaler un message si javascript est désactivé côté client. J'ai cherché ici et trouvé <noscript> tag à utiliser pour gérer ce genre de choses.

Je l'ai fait à l'éditeur de w3schools pour vérifier, mais cela ne fonctionne pas, faites-moi savoir si ce <noscript> n'est pas destiné à cela ou à quelque chose d'autre qui me manque dans cette partie?

enter image description here

javascriptnoscript
17
Trialcoder

Essaye ça :-

How to detect JavaScript is disabled in browser?

Comme nous le savons, la balise est utilisée pour JavaScript. De la même manière, il y a une balise qui entre en action lorsque les scripts Java sont désactivés dans le navigateur.

<script>Put Sample code here for execution when JavaScript is Active </script>
<noscript>Put Sample code here for execution when JavaScript is Disabled</noscript>

Comment gérer le JavaScript désactivé dans le navigateur?

Lorsque JavaScript est désactivé, j'ai juste essayé de rediriger vers une page où nous pouvons afficher le message que Javascript est désactivé. Il existe une balise Meta en HTML nommée "Meta Refresh" qui redirigera l'utilisateur vers une autre page dans l'intervalle spécifié dans cet en-tête.

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

Comme, nous pouvons voir le code ci-dessus à l'intérieur de noscript, il y a une balise "meta refresh" avec un intervalle de "0" seconde. Comme, le JavaScript est désactivé dans cette page, le navigateur est redirigé vers "ShowErrorPage.html" pour afficher un message d'avertissement.

J'espère que cela t'aidera.

39
Rubyist

Vous avez raison. Le <noscript> tag est utilisé pour afficher uniquement si JavaScript est désactivé. Pour tester cela, procédez comme suit:

  • Enregistrez cet extrait dans un fichier "test.html".
  • Ouvrez-le avec votre navigateur.
  • Activer/désactiver JavaScript (dans FireFox, c'est ici: Outils/Options/Contenu/Activer JS).

Comme vous pouvez le voir, vous pouvez mettre tout HTML à l'intérieur du <noscript> tag que vous mettriez dans le corps d'une page.

<html>
  <body>
    <h1>Simple Example Page</h1>
    <script type="text/javascript">
      document.write("Hi, JavaScript is enabled!");
    </script>
    <noscript>
      <div style="border: 1px solid purple; padding: 10px">
        <span style="color:red">JavaScript is not enabled!</span>
      </div>
    </noscript>
  </body>
</html>
9
jensP
<noscript>
   <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

n'est pas une bonne solution car IE11 (et les versions précédentes) ont une option de sécurité qui, lorsqu'elle est définie sur "haut", désactive Javascript et les balises Meta Refresh!

La meilleure solution que j'ai trouvée pour gérer ce cas est:

<noscript class="noscript">
   <div id="div100">
   Please enable javascript in your browser .... blah blah
   </div>
</noscript>

<style>
   body{
      position:relative;
   }
   .noscript {
      width:100%;
      height:100%; /* will cover the text displayed when javascript is enabled*/
      z-index:100000; /* higher than other z-index */
      position:absolute;
   }
   .noscript #div100{
       display:block;
       height:100%;
       background-color:white; 
   }
</style>
7
frank

<noscript> est destiné à ce genre de choses, tout comme <script> est destiné à JS. N'oubliez pas que l'utilisation de l'actualisation des balises META:

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

signifie que cela est facilement désactivé dans IE (IE10 au moins) en augmentant la sécurité des options Internet (qui a probablement été utilisée pour désactiver le JS en premier lieu). L'option "autoriser META REFRESH" est désactivé lorsque le paramètre de sécurité est augmenté.

3
RickL

Placez le message "ne prend pas en charge" dans un div et utilisez JavaScript pour masquer le div lors du chargement de la page

1
thesimm

Vous pouvez utiliser la même méthode que celle utilisée par stackoverflow. Voir mon lien jsfiddle. Lorsque Javascript est désactivé, dans le premier bloc noscript, juste après la balise body, vous allez ajouter un padding-top à une div enfant vide, afin que vous puissiez ajouter le contenu que vous voulez dans votre corps, puis, à la fin, un autre bloc noscript avec un div de position fixe à l'intérieur, ayant le message d'avertissement que vous voulez. Essayez de l'exécuter, avec et sans Javascript activé. Faites le moi savoir! :)

Voir le code ici: https://jsfiddle.net/go60f00n/

<noscript>
         <div id='noscript_padding'></div>
      </noscript>
      <div>
         <p>Lorem ipsum dolor sit amet consectetuer tincidunt nunc ac faucibus mattis. Gravida tempus turpis Morbi vitae sed Suspendisse auctor dignissim nulla adipiscing. Adipiscing justo lacinia justo Vivamus Vestibulum amet ut Donec vitae aliquet. Orci tempus orci Donec nibh eget tellus pede semper adipiscing leo. A et id sagittis velit venenatis.</p>
         <p>Tellus ridiculus ipsum pretium condimentum Ut elit sed vitae amet In. Curabitur ipsum elit interdum tortor semper at dolor justo consequat leo. Id fermentum vitae tincidunt pretium lacus leo Cras urna risus urna. Pretium Vestibulum et euismod nec pede et tincidunt condimentum laoreet vel. Dolor vestibulum laoreet habitant a Nulla.</p>
         <p>Lobortis lobortis quis elit mollis quis risus Morbi in augue montes. Mauris ipsum libero tellus et Quisque id non justo nibh dui. Dui nisl at Fusce Curabitur interdum tincidunt sed Vestibulum platea justo. At ut ante eget ac sem sed nulla id nunc mus. Velit In faucibus a auctor Sed Morbi habitasse est urna natoque. </p>
      </div>
      <noscript>
         <div id='noscript_warning'>Please enable Javascript!</div>
      </noscript>

donc le code css:

html, body {
            margin: 0;
            padding: 0;
            height: 100%;
         }

         p {
            margin: 0;
         }

         #noscript_padding {
            padding-top: 1.9em;
         }

         #noscript_warning {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 101;
            text-align: center;
            font-weight: bold;
            color: #FFF;
            background-color: #AE0000;
            padding: 5px 0 5px 0;
         }
0
JB-Franco