noscript tag, eu preciso apresentar html alternativa se não habilitado

https://stackoverflow.com/questions/488492

20-08-2019
|

Pergunta

É possível substituir javascript w / HTML se o JavaScript não está habilitado no navegador do usuário?

Eu sei que posso usar <noscript>this displays in place of javascript</noscript>

Esta coima funciona, mas ainda corre o javascript.

Em teoria, eu iria querer isso:

se o javascript está habilitado executar javascript

se o javascript não está habilitado fazer javascript não correr e dar método alternativo

Eu estou usando este plugin jQuery: http://malsup.com/jquery/cycle/ int2.html

Quando eu desativar javascript no safari, ele exibe todos os três itens, tudo dentro de uma div. Os fades plugins em cada item, mas com ele desativado ele exibe todos os três em uma fileira, sem esmorecer dentro e fora como ele faz w / JavaScript.

Com o JavaScript desativado, eu gostaria de parar de exibir todos os três itens ao mesmo tempo. Eu vou te mostrar o que é supor para o eo que ele faz quando o JavaScript está desativado.

vista Disabled: http://i42.tinypic.com/212y1j6.png ( notá-los 3 empilhadas sobre o eachother) - Eu quero impedir que isso aconteça uma vez que o JavaScript está desativado

vista Enabled: http://i39.tinypic.com/9gwu3d.png

Aqui está o código para o div os itens está em:

$(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 para o 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;
}

Solução

Um pouco como solução , você pode usar Javascript para alterar o conteúdo para os usuários que têm-lo ativado. Por exemplo, digamos que você tem um menu de fantasia que dá aos usuários Javascript super-fácil navegação, mas é inútil para usuários não-JS. No HTML definir a propriedade de exibição para 'none' e, em seguida, usar JS para habilitá-lo. No seu caso, onde você tem conteúdo que você não deseja mostrar para os usuários não-JS, você só pode escondê-lo por padrão. A desvantagem é que se o navegador tem JS e CSS desligado, isso não vai funcionar. Se você está preocupado com isso, você pode usar JS para inserir o conteúdo.

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

Outras dicas

Uma alternativa ao uso <noscript> é esconder um certo elemento com JavaScript, logo que a página é carregada. Se o JavaScript estiver desativado, o elemento permanecerá como está sendo exibido. Se o JavaScript estiver ativado, seu script será executado e o elemento será escondido.

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

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

Atualização

Se você quiser fazer o oposto (mostrar um pouco de HTML quando o JavaScript está habilitado), você sempre pode injetar novos elementos na árvore DOM usando vários métodos. Aqui está um:

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

Kudos para John Resig para o truque <script type="text/html"> para esconder discretamente modelos HTML dentro HTML. Browsers aparentemente não executar ou processar o conteúdo <script> de um tipo não convencional.

Ele vai executar scripts se os scripts estão habilitadas. Se você quiser organizar o