Como ocultar partes do HTML quando o JavaScript está desativado?

StackOverflow https://stackoverflow.com/questions/1577598

  •  21-09-2019
  •  | 
  •  

Pergunta

Estou tentando acomodar usuários sem JavaScript. (A propósito, vale a pena o esforço hoje em dia?)

Em um arquivo html, eu gostaria de fazer parte dele se os scripts forem sobre, e outra parte se os scripts estiverem desligados.

o <noscript> Tag me permite fazer o primeiro, mas como alcançar o último? Como posso marcar uma parte do HTML para que não seja analisado pelo navegador se os scripts forem desligado?

Foi útil?

Solução

Aqui está um tutorial em vídeo sobre como isso pode ser feito com o jQuery: http://screenr.com/ya7

Código:

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

E então apenas ocultar os elementos relevantes em body.noscript adequadamente.

editarNo entanto, o jQuery pode ser inchado para uma pequena correção como esta, então eu sugiro Resposta de Zauber Paracelsus já que não requer jQuery.

Outras dicas

Eu estava procurando uma maneira de fazer isso para que eu pudesse ocultar um menu suspenso de navegação que seja tornado não funcional quando o JavaScript estiver ativado. No entanto, todas as soluções para alterar a propriedade de exibição não funcionaram.

Então, o que eu fiz primeiro foi atribuído a um ID (ddown) ao elemento div em torno do menu suspenso.

Então, dentro da seção principal do documento HTML, adicionei isso em:

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

E isso acabou de funcionar. Nenhuma dependência de JavaScript, jQuery ou qualquer outro script: apenas HTML e CSS puros.

Padrão os bits que você deseja se esconder tão estilizado quanto display:none e ligue -os com jQuery ou JavaScript.

A propósito, vale o esforço hoje em dia?

Sim, vale a pena se preocupar com a acessibilidade. Você deve usar o aprimoramento progressivo sempre que possível, ou seja, faça uma versão básica que funcione sem scripts e adicione a funcionalidade de script em cima dela.

Um exemplo simples seria um link pop-up. Você poderia fazer um assim:

<a href="javascript:window.open('http://example.com/');">link</a>

No entanto, esse link não funcionaria se alguém, digamos, cliquei no meio ou tentasse marcar-o, ou tivesse scripts desativados etc. Em vez disso, você poderia fazer a mesma coisa assim:

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

Ainda não é perfeito, porque você deve separar as camadas de comportamento e estrutura e evitar manipuladores de eventos em linha, mas é melhor, porque é mais acessível e não requer scripts.

The JQuery Way:

$(document).ready(function(){
    $("body").removeClass("noJS");
});

Pseudo CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

Html

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

Se o conteúdo só faz sentido quando o JavaScript estiver ativado, ele deve ser inserido diretamente pelo código JavaScript, em vez de ser renderizado. Isso pode ser feito simplesmente tendo modelos HTML como strings dentro do seu código JavaScript ou usando AJAX se o HTML for mais complexo.

Como mencionado por Reinis I. Esta é a ideia de Aprimoramento progressivo.

Em relação às técnicas CSS de usar um nome de classe na etiqueta corporal, eu aconselho a fazer isso o contrário e adicionando um 'js-enabled'Classe para a etiqueta corporal com JavaScript que alteraria o CSS da página. Isso se encaixa no meu comentário acima sobre como manter todo o HTML inicial 'não-Javascript Friendly'.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top