Não devemos usar o elemento

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

Pergunta

Encontrei alguns bons contras aqui:

  • O elemento Noscript detecta apenas se o navegador possui ou não o JavaScript. Se o JavaScript estiver desativado no firewall e não no navegador, o JavaScript não será executado e o conteúdo do elemento Noscript não será exibido.

  • Muitos scripts dependem de um recurso ou recursos específicos do idioma suportado para que eles possam ser executados (por exemplo, document.getElementById). Onde os recursos necessários não são suportados, o JavaScript não pode ser executado, mas como o próprio JavaScript é suportado, o conteúdo do Noscript não será exibido.

  • O local mais útil para usar o elemento Noscript está na cabeça da página, onde seria capaz de determinar seletivamente qual folha de estilo e meta elementos são aplicados na página enquanto a página está carregando em vez de ter que esperar até que a página seja carregada. Infelizmente, o elemento Noscript é válido apenas dentro do corpo da página e, portanto, não pode ser usado na cabeça.

  • O elemento Noscript é um elemento de nível de bloco e, portanto, só pode ser usado para exibir blocos inteiros de conteúdo quando o JavaScript está desativado. Não pode ser usado embutido.

  • Idealmente, as páginas da web devem usar HTML para o conteúdo, CSS para a aparência e JavaScript para o comportamento. O uso do elemento Noscript está aplicando um comportamento de dentro do HTML, em vez de aplicá -lo no JavaScript.

Fonte: http://javascript.about.com/od/reference/a/noscriptnomore.htm

Eu concordo muito no último ponto. Existe uma maneira de fazer e adicionar um externo <noscript> Arquivo? Devemos colocar <noscript> no <head>?

Foi útil?

Solução

É melhor que o padrão seja não-Javascript e, em seguida, deixe um código JavaScript substituir com uma página ativada por JavaScript. Não precisa ser muito. Pode ser apenas um display:none; bloco, que está então definido como display:block; por JavaScript e vice-versa para a página não JS.

Outras dicas

Depois de pensar por muitos dias e mudar meu código, acho que agora tenho uma foto mais clara e gostaria de compartilhar meus dois centavos no assunto antes de esquecer. 

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

vs.

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Dependendo da situação, há três casos para consideração:

Caso 1 - Se necessário, o script estiver embutido

JavaScript desativado

  • Conteúdo em <noscript> O elemento aparece imediatamente, o conteúdo não JS é mostrado
  • Conteúdo em <div> O elemento aparece imediatamente, o conteúdo não JS é mostrado

JavaScript ativado

  • Conteúdo em <noscript> Elemento não aparece, o conteúdo JS mostrado
  • Conteúdo em <div> O elemento pode aparecer momentaneamente antes de estar escondido, o conteúdo JS mostrado

Para este caso, usando <noscript> O elemento é vantajoso.

Caso 2 - Se necessário, o script for de fonte externa (de terceiros), mas escondendo -se de <div> O elemento é feito com script embutido

JavaScript desativado

  • Conteúdo em <noscript> O elemento aparece imediatamente, o conteúdo não JS é mostrado
  • Conteúdo em <div> O elemento aparece imediatamente, o conteúdo não JS é mostrado

JavaScript ativado, mas o script necessário está bloqueado

  • Conteúdo em <noscript> O elemento não aparece, nada é mostrado!
  • Conteúdo em <div> O elemento pode aparecer momentaneamente antes de ser escondido, nada é mostrado!

JavaScript ativado e o script necessário é recebido

  • Conteúdo em <noscript> Elemento não aparece, o conteúdo JS mostrado
  • Conteúdo em <div> O elemento pode aparecer momentaneamente antes de estar escondido, o conteúdo JS mostrado

Para este caso, usando <noscript> O elemento é vantajoso.

Caso 3 - Se necessário, o script oculta o <div> elemento

JavaScript desativado

  • Conteúdo em <noscript> O elemento aparece imediatamente, o conteúdo não JS é mostrado
  • Conteúdo em <div> O elemento aparece imediatamente, o conteúdo não JS é mostrado

JavaScript ativado, mas o script necessário está bloqueado

  • Conteúdo em <noscript> O elemento não aparece, nada é mostrado!
  • Conteúdo em <div> O elemento aparece, o conteúdo não JS é mostrado

JavaScript ativado e o script necessário é recebido

  • Conteúdo em <noscript> Elemento não aparece, o conteúdo JS mostrado
  • Conteúdo em <div> O elemento pode aparecer momentaneamente antes de estar escondido, o conteúdo JS mostrado

Para este caso, usando <div> O elemento é vantajoso.

Resumindo

Usar <noscript> O elemento se a renderização do conteúdo HTML depende de scripts de terceiros ou se o script necessário estiver embutido. Caso contrário, use <div> elemento e verifique se o script necessário contém:

document.getElementById('noscript').style.display='none';

Embora o Tor Valamo tenha uma resposta elegante para esse problema, há um problema que pode fazer com que você não onda usando essa técnica.

O problema é (geralmente) ou seja. Ele tem a tendência de carregar e executar o JS um pouco mais lento do que outros navegadores, fazendo com que ele mostre a divisão às vezes o "Ative seu JavaScript" para uma fração de segundo antes de carregar o JS e esconde o div.

É irritante e, para contornar isso, você pode implementar o "clássico". <noscript> Redirecionar abordagem.

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

Esta é a técnica mais sólida que eu encontrei com relação a esse pouco desagradável.

Um aplicativo útil para o Noscript que eu já vi é para um carregamento assíncrono progressivamente aprimorado de conteúdo pesado (especialmente "abaixo da dobra"). Imagens grandes, iframes, etc. podem ser embrulhadas em Noscript na fonte HTML e, em seguida, os elementos desembrulhados podem ser anexados à página usando JavaScript depois que o DOM estiver pronto. Isso desbloqueia a página e pode proporcionar uma experiência de carregamento inicial muito mais rápida, especialmente se a sua interface depender de interações JS/JQ aplicadas após o documento estar pronto (2 segundos vs. 6 segundos para uma página de portfólio em que consultei).

Hoje em dia, parece que quase todos os navegadores executam JavaScript, mas você nunca pode saber quem vai acessar seu site. Hoje em dia leitores de tela e rastreadores da web Use JavaScript e, às vezes, faça solicitações do AJAX, se necessário.

Dito isto, se você vai voltar a não-Javascript, existe uma maneira muito melhor do que um <noscript> marcação. Simplesmente faça isso no HEAD do seu documento:

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

Com esta técnica, você pode se referir facilmente ao Q_js classe em seu CSS para esconder as coisas. Com o <noscript> TAG, o melhor que você pode esperar é incluir um arquivo CSS adicional para substituir o CSS anterior. Isso se torna importante quando alguns elementos com conteúdo estático devem estar ocultos imediatamente (não piscar) até que o JavaScript possa torná -los mais dinâmicos.

Em resumo, a técnica que sugeri endereços todos os seus contras 1-5, e acredito que é estritamente melhor do que usar <noscript>.

No futuro (esperançosamente), você poderá usar script css:

@media (scripting: none) {
    /* styles for when JS is disabled */
}

A IDEEA simples é neste momento que seu site pode se adaptar ao uso de JavaScript em dispositivos lentos usando a tag noscript como uma entidade para todo o conteúdo do seu site ** (Seu HTML deve estar preparado para nenhum JavaScript e todos os controles também devem funcionar se o JavaScript estiver desligado, os usuários usando controles básicos de HTML Shoul poderão fazer tudo o que fizeram antes quando o JavaScript estava ativo. <noscript></noscript> pode ser a mudança dinâmica para o mesmo conteúdo de outra maneira com os mesmos resultados = resolver o problema que é a razão pela qual os usuários abrem seu URL). ** Você pode ver que não importa JavaScript está ou não presente, a funcionalidade do site pode ser "a mesma" em qualquer caso JS habilitado / desativado. Em Dispositivos lentos chineses, por exemplo: Samsung Neo Mini Telefone Este método pode executar um site sem quaisquer atrasos no baixo tráfego da Internet. Tente executar este site de Auto Double FunctionAllity, se o JS estiver ligado/desligado:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

E para dizer mais sobre isso. O Noscript direito foi inventado para funcionar como um gatilho quando o JS está desativado, mas você pode contornar esse recurso para mudar o curso da funcionalidade da Internet sobre como é agora, mudar sua dinâmica ....

Eu crio uma altura total, largura total, posição: Div corrigido em todas as páginas com algum ID. 

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

Eu não sou um especialista . Isso funcionou para mim. Sinto muito, mas este caso só será adequado se você quiser que o usuário tenha seu javascript habilitado sempre

Como todas as coisas, use a ferramenta certa para o trabalho.

Se você estiver usando a API do Google Maps, você terá uma imagem estática via tag e isso será substituído pelo mapa JS dinâmico. O Google começou recentemente a cobrar por tudo, assim, com o exemplo acima, custará duas vezes, uma vez por estática e uma vez por dinâmica. O mapa estático é relevante apenas se o JS estiver desativado. Portanto, para economizar o dobro do pagamento, parece -me que a melhor solução é envolver a tag do mapa estático em uma tag.

O elemento "Noscript" não é suportado no XML ou no poligloto XHTML5, portanto não é recomendado pelo W3C.

Também não gosto da ideia de que cada página começa com um Div visível sem script, que é oculto por algum truque de circo JavaScritted em todas as páginas de um site. Dependências perigosas e mais scripts que podem falhar ou causar estragos se alteradas por um desenvolvedor posterior.

Uma estratégia melhor é projetar seu site com um design básico de HTML que envolve todo o conteúdo script interno para que o usuário veja pelo menos um design de página com um cabeçalho e um local onde o conteúdo básico aparecesse. Se estiver vazio, é bastante óbvio que eles não podem ver o conteúdo por um motivo. Eu adicionaria uma pequena mensagem ou ícone de informação no rodapé dizendo, se você não encontrar conteúdo, seu JavaScript está desativado. Parece se eles veem conteúdo com script ou não. Esta solução está livre de scripts.

Como último recurso, você pode ter essa mensagem oculta pelos scripts usando o Display: Nenhum na parte inferior de todas as páginas da web.

Não é tão sexy quanto fornecer conteúdo alternativo ou uma caixa de mensagem, mas, no caso de sites angulares pesados, você precisaria criar uma nova página de conteúdo para eles, de qualquer maneira, se os scripts fossem desativados. Esta solução também é responsável pelo suporte a nenhum script em um suporte de agente de usuário versus para desativado e torna sua página da web 100% XML e HTML5 compatíveis com todos os agentes de usuário, evitando a tag noscript.

Eu recomendo que você não use <noscript> , você pode usar o seguinte código:

<HTML>
<head>
<script>
     window.location="some-page.php";
</script>
</head>
<body>
<p>
    Please active JavaScript .
</p>
</body>
</HTML>

Se, em qualquer circunstância, o JS não estiver ativado, a mensagem será exibida, caso contrário, o usuário será redirecionado para a página de destino.

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