balise noscript, j'ai besoin de présenter du code HTML alternatif si non activé

Question

Est-il possible de remplacer javascript w / HTML si JavaScript n'est pas activé sur le navigateur de l'utilisateur?

Je sais que je peux utiliser <noscript>this displays in place of javascript</noscript>

Cela fonctionne bien, mais le javascript est toujours utilisé.

En théorie, je voudrais ceci:

si javascript est activé
& nbsp; exécuter javascript

si javascript n'est pas activé
& nbsp; ne pas exécuter javascript et donner une méthode alternative

J'utilise ce plugin jQuery: http://malsup.com/jquery/cycle/ int2.html

Lorsque je désactive JavaScript sur Safari, il affiche les trois éléments, tous au sein d’un div. Le plugin apparaît en fondu dans chaque élément, mais avec cette option désactivée, il affiche les trois éléments à la suite, sans fondus en entrée et en sortie comme il le fait avec JavaScript activé.

Avec le javascript désactivé, je voudrais l’empêcher d’afficher les trois éléments en même temps. Je vais vous montrer à quoi il est supposé ressembler et ce qu'il fait lorsque JavaScript est désactivé.

Affichage désactivé: http://i42.tinypic.com/212y1j6.png ( remarquez-les 3 empilés les uns sur les autres) - Je souhaite que cela ne se produise plus, car JavaScript est désactivé

Vue activée: http://i39.tinypic.com/9gwu3d.png

Voici le code de la division dans laquelle se trouvent les éléments:

$(document).ready(function() {
    $('#featured-programs-left').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 15000,
        next:   '#next2',
        prev:   '#prev2' 
    });
});

<div id="featured-programs-left">

<div>
    <a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Emergency Medical Technician - Paramedic"><img src="http://site.com/images/uploads/images/emt.jpg" alt="Emergency Medical Technician - Paramedic" /></a>
    <strong>Emergency Medical Technician - Paramedic</strong>
    <p>This unique A.A.S. degree program, a partnership between College and Faxton-St. Luke&#8217;s Healthcare provides the paramedic student the education necessary to function in an</p> 
    <p><a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>

<div>
    <a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Travel &amp; Tourism: Hospitality &amp; Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel &amp; Tourism: Hospitality &amp; Events Management" /></a>
    <strong>Travel &amp; Tourism: Hospitality &amp; Events Management</strong>
    <p>This program prepares students for exciting careers in the travel and tourism industry and the hospitality and events planning field. Graduates are prepared to:<br</p> 
    <p><a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Learn more about Travel &amp; Tourism: Hospitality &amp; Events Management">Learn more</a></p>
</div>

<div>
    <a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying &amp; Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying &amp; Merchandising" /></a>
    <strong>Fashion Buying &amp; Merchandising</strong>
    <p>This program prepares graduates for careers throughout the Fashion Industry including positions in buying, fashion merchandising, retail and wholesale sales, retail</p> 
    <p><a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Learn more about Fashion Buying &amp; Merchandising">Learn more</a></p>
</div>

</div>

CSS pour la div

#featured-programs-left img,
#featured-programs-right img{
    xfloat:left;
    overflow:auto;
    xclear:left;
    xwidth:351px;
    xpadding:0 5px 5px 0;
    border:0;
}

#featured-programs-left,
#featured-programs-right {
    height:625px;
    float:left;
    overflow:auto;
    clear:left;
    clear:right;
    width:100%;
    xborder:2px solid red;
}

#featured-programs-left div,
#featured-programs-right div {
    xborder:1px solid purple;
    overflow:auto;
    clear:left;
    clear:right;
    width:352px;
    height:345px;
}

#featured-programs-left {
    float:left;
}

Answer 1

Un peu comme La solution d'Ates , vous pouvez utiliser Javascript pour modifier le contenu pour les utilisateurs qui l’ont activé. Par exemple, supposons que vous disposiez d'un menu sophistiqué qui offre aux utilisateurs de Javascript une navigation extrêmement facile, mais qui ne vaut rien pour les utilisateurs non-JS. Dans le code HTML, définissez la propriété display sur 'none', puis utilisez JS pour l'activer. Dans votre cas, lorsque vous avez du contenu que vous ne souhaitez pas afficher pour les utilisateurs non-JS, vous pouvez simplement le masquer par défaut. L'inconvénient est que si JS AND CSS est désactivé sur le navigateur, cela ne fonctionnera pas. Si cela vous inquiète, vous pouvez utiliser JS pour insérer le contenu.

<html>
<head>
  <script>
    $(document).ready(function() {
      $('.jsok').show();
    });
  </script>
  <style>
    .jsok { display: none; }
  </style>
 </head>
 <body>
   <div class="jsok"><!-- content for JS users here--></div>
   <div><!-- content for everyone here --></div>
   <noscript><!-- content for non-js users here --></noscript>
 </body>
 </html>

Answer 2

Une alternative à <noscript> consiste à masquer un certain élément avec JavaScript dès le chargement de la page. Si JavaScript est désactivé, l'élément restera tel qu'il est affiché. Si JavaScript est activé, votre script sera exécuté et l'élément sera masqué.

window.onload = function () {
    document.getElementById("no_script").style.display = "none";
}

<div id="no_script">
You don't have JavaScript enabled.
</div>

Mettre à jour

Si vous voulez faire le contraire (afficher un peu de HTML lorsque JavaScript est activé), vous pouvez toujours injecter de nouveaux éléments dans l'arborescence DOM à l'aide de différentes méthodes. En voici un:

$(document).ready(function() {
    $('#container').html($('#content').html());
});

<div id="container"></div>
<script type="text/html" id="content">
    <div>Your <em>HTML</em> goes here</div>
</script>

Félicitations à John Resig pour le <script type="text/html"> truc permettant de cacher HTML discrètement modèles à l'intérieur du HTML. Les navigateurs ne s'exécutent ni ne rendent apparemment le <script> contenu d'un type non conventionnel.

Answer 3

Il exécutera les scripts si ceux-ci sont activés. Si vous voulez mettre en scène le & Lt; noscript & Gt; comportement, désactivez JavaScript dans votre navigateur et essayez-le.