Maneira válida de adicionar o noscript na cabeça para o redirecionamento de embrulho

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

Pergunta

Então, eu estava pensando que uma maneira simples de lidar com o JavaScript sendo desativado pelo navegador seria o seguinte:

<head>
        <title>JavaScript Test</title>
        <noscript>
                <meta http-equiv="Refresh"
                        content="1;url=nojs.html" />
        </noscript>
</head>

E ter o nojs.html tem algo como:

<p>Return to <a href="jstest.html">test</a> after enabling javascrpt.</p>

Na página de colisão.

Este não é o meu método preferido, mas é bom e simples até que algo mais gracioso possa ser elaborado para usuários sem JavaScript.

No entanto, não é válido colocar um <noscript> elemento no head seção. Os testes preliminares funcionaram de qualquer maneira, é claro, mas sou supersticioso quando se trata do meu código ser válido, além de odiar que isso realmente falhasse em um teste de campo.

Então, existe uma maneira válida de fazer isso? Talvez envolver o noscript Em outro elemento, como uma tag de objeto? Ou alguma maneira ainda mais simples em que não estou pensando?

Foi útil?

Solução

Não sei por que você precisa redirecionar para outra página em vez de apenas mostrar uma mensagem. Eu uso JS e um pouco de CSS para lidar com essas situações para mim. Algo assim:

<head>
   ....
   <script type="text/javascript"> document.documentElement.className += " js"</script>

   <link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
    <div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
    <div id="wrapper">
       ...
    </div>
</body>

Então em layout.css:

 #wrapper      { display: none  } /* Hide if JS disabled */
 .js #wrapper  { display: block } /* Show if JS enabled */
 .js #noscript { display: none  } /* Hide if JS enabled */

Ao fazer dessa maneira, a classe é aplicada ao html elemento antes da A página é renderizada para que você não obtenha um piscar, pois o conteúdo que não é JS é trocado pelo conteúdo JS.

Outras dicas

A solução de Doug é muito boa, mas tem algumas desvantagens:

  • Não é válido ter um atributo de classe no elemento HTML. Em vez disso, use o corpo.
  • Requer que você saiba qual tipo de exibição definir o elemento (ou seja ".js #wrapper { display: block }").

Uma solução mais simples, mais válida e flexível usando a mesma abordagem pode ser:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff ','');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

Com isso, é HTML válido (nenhum atributo de classe no elemento HTML). É mais simples (menos CSS). É flexível. Basta adicionar a classe "jsonly" a qualquer elemento que você deseja exibir apenas quando o JS estiver ativado.

o <noscript> tag não pode estar no <head>, deve estar no <body>

A prática comum é mostrar uma mensagem em vez de redirecionar, pois não há como redirecionar apenas se o JavaScript estiver desativado.

Você pode fazê -lo o contrário, fazer com que a primeira página seja nojs.html e, nessa página, use JavaScript para redirecionar para o conteúdo principal.

Se você realmente quer uma maneira válida de fazê -lo, faça sua página principal o nojs.htm página e use JS para ocultar todo o conteúdo antes de ser mostrado ao usuário e redirecionar imediatamente para a página principal real usando o JavaScript.

Eu gosto da solução de Doug. No entanto, se você precisar redirecionar, eu lembraria que, embora exista uma especificação e um padrão, o mundo dos navegadores da Web é um mundo sujo e imperfeito. Se algo é ou não permitido pela especificação não é tão importante quanto se funciona ou não no conjunto de navegadores de quem você se importa.

Basta olhar para o código -fonte de qualquer site principal ... a maioria deles não validará que eu apostaria :)

A respeito:

noscript{
z-index:100;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:1024px; background:#FFF;
}

E:

<noscript>
<p>Please <a href="no_js_instructions.php">enable Javascript</a> on your browser.</p></noscript>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top