noscript-Tag, ich brauche alternatives html zu präsentieren, wenn nicht aktiviert

https://stackoverflow.com/questions/488492

20-08-2019
|

Frage

Ist es möglich, Javascript w / HTML zu ersetzen, wenn JavaScript nicht auf dem Browser des Benutzers aktiviert ist?

Ich weiß, ich kann <noscript>this displays in place of javascript</noscript> verwenden

Das funktioniert gut, aber es läuft immer noch die JavaScript.

In der Theorie würde ich dies will:

, wenn Javascript aktiviert ist
laufen Javascript

, wenn Javascript nicht aktiviert
Javascript nicht läuft und gibt alternative Methode

Ich bin mit dieser jQuery-Plugin: http://malsup.com/jquery/cycle/ int2.html

Wenn ich Javascript auf Safari zu deaktivieren, zeigt sie alle drei der Elemente, die alle innerhalb eines div. Das Plugin blendet in jedem Element, aber mit es deaktiviert es zeigt alle drei in einer Reihe, ohne Fading und aus wie es funktioniert w / JavaScript aktiviert ist.

Mit Javascript deaktiviert, ich möchte sie daran hindern, die Anzeige aller drei Elemente zur gleichen Zeit. Ich werde Ihnen zeigen, wie es aussehen wird angenommen, und was es tut, wenn JavaScript deaktiviert ist.

Behindertenansicht: http://i42.tinypic.com/212y1j6.png ( sie 3 gestapelt oben auf einander bemerken) - ich möchte, dass stoppen geschieht, da die JavaScript ist deaktiviert

Aktiviert Ansicht: http://i39.tinypic.com/9gwu3d.png

Hier ist der Code für die div der Einzelteile sind in:

$(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 für die divs

#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;
}

Lösung

Etwas wie Ates-Lösung , können Sie Javascript verwenden, um den Inhalt für die Benutzer zu ändern, die es ihr ermöglicht haben. Zum Beispiel, sagen wir, Sie Lust Menü haben die Javascript-Benutzer super-einfache Navigation gibt, ist aber wertlos Nicht-JS-Nutzer. Im HTML die Display-Eigenschaft auf ‚none‘ und dann JS verwenden, um es zu aktivieren. In Ihrem Fall, in dem Sie Inhalte, die Sie wollen nicht für die Nicht-JS Benutzer zeigen haben, können Sie verstecken es nur standardmäßig. Der Nachteil ist, wenn der Browser JS hat und CSS ausgeschaltet, das wird nicht funktionieren. Wenn Sie darüber besorgt sind, könnten Sie JS verwenden, um die Inhalte einzufügen.

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

Andere Tipps

Eine alternative <noscript> zu verwenden ist, ein bestimmtes Element mit JavaScript, sobald die Seite geladen zu verstecken. Wenn JavaScript deaktiviert ist, bleibt das Element als angezeigt wird. Wenn JavaScript aktiviert ist, wird das Skript ausgeführt, und das Element wird ausgeblendet werden.

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

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

Update

mit verschiedenen Methoden

Wenn Sie möchten, das Gegenteil tun (zeigt ein wenig HTML, wenn JavaScript aktiviert ist), können Sie immer wieder neue Elemente in den DOM-Baum injizieren. Ist hier ein:

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

Ein großes Lob an John Resig für den <script type="text/html"> Trick unauffällig versteckt in HTML-Vorlagen HTML. Browser offenbar nicht <script> Inhalt einer unkonventionellen Art auszuführen oder machen.

Es wird Skripts ausführen, wenn Skripte aktiviert sind. Wenn Sie die