Há um HTML oposto <noscript>?

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Existe uma tag no HTML que só vai mostrar o seu conteúdo se o JavaScript está ativado?Eu sei <noscript> funciona da maneira oposta ao redor, exibindo o seu conteúdo em HTML quando o JavaScript está desativado.Mas eu gostaria de apenas exibir um formulário em um site se o JavaScript estiver disponível, dizendo-lhes por que eles não podem usar o formulário, se ainda não o tiver.

A única maneira que eu sei como fazer isso é com o document.write(); método em uma tag de script, e ele parece um pouco confuso para grandes quantidades de HTML.

Foi útil?

Solução

Você poderia ter um invisível div que fica demonstrado através de JavaScript quando a página carrega.

Outras dicas

Maneira mais fácil que eu posso pensar em:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Nenhum documento.escrever, sem scripts, CSS puro.

Eu realmente não concordo com todas as respostas aqui sobre a incorporação de HTML, de antemão, e escondendo-o com CSS, até que novamente é mostrado com JS.Mesmo w/o JavaScript habilitado, nó que ainda existe no DOM.Verdade, a maioria dos navegadores (mesmo acessibilidade navegadores) irá ignorá-lo, mas ele ainda existe e pode haver momentos ímpares quando o que vem de volta para mordê-lo.

O meu método preferido é utilizar o jQuery para gerar o conteúdo.Se ele vai ser um monte de conteúdo e, em seguida, você pode salvá-lo como um fragmento de HTML (apenas o HTML você vai querer mostrar e nenhum html, o corpo, a cabeça, etc.tags), em seguida, usar o jQuery ajax funções para carregar-lo em toda a página.

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

resultado

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

Primeiro de tudo, sempre separar o conteúdo, marcação e comportamento!

Agora, se você estiver usando a biblioteca jQuery (você realmente deve, faz JavaScript muito mais fácil), o código a seguir deve fazer:

$(document).ready(function() {
    $("body").addClass("js");
});

Isto dará a você uma classe adicional sobre o corpo quando a JS está ativado.Agora, em CSS, você pode ocultar a área, quando a JS classe não está disponível, e mostrar a área, quando a JS está disponível.

Como alternativa, você pode adicionar no-js como a classe padrão para o seu corpo tag, e use este código:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Lembre-se de que ele ainda é exibido se o CSS é desativado.

Eu tenho uma simples e flexível solução, algo similar à Vontade (mas com a vantagem de ser válido em html):

Dar ao corpo o elemento de uma classe de "jsOff".Remover (ou substituir) isso com JavaScript.Ter CSS para ocultar os elementos com a classe "jsOnly" com um elemento pai com uma classe de "jsOff".

Isso significa que, se o JavaScript está ativado, o "jsOff" classe vai ser removida do corpo.Isto significa que os elementos com a classe "jsOnly" não tem um pai com uma classe de "jsOff" e, assim, não coincidir com o seletor CSS que esconde-los, assim eles serão mostrados.

Se o JavaScript está desativado, o "jsOff" classe não ser removidos do corpo.Elementos com "jsOnly" vai ter um dos pais com a "jsOff", e assim por vai coincidir com o seletor CSS que esconde-los, assim eles serão ocultados.

Aqui está o código:

<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','jsOn');
        </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>

É válido html.Ele é simples.É flexível.

Basta adicionar o "jsOnly" classe para qualquer elemento que você deseja exibir somente quando a JS está ativado.

Por favor, note que o JavaScript que remove o "jsOff" classe deve ser executado tão cedo quanto possível dentro da tag body.Ele não pode ser executada anteriormente, como a tag body e não vai estar lá ainda.Ele não deve ser executado mais tarde, como ele vai dizer que elementos com o "jsOnly" classe podem não ser visíveis imediatamente (como eles vão coincidir com o seletor CSS que esconde-los até o "jsOff" classe é removida do corpo do elemento).

Isso também poderia fornecer um mecanismo para a js-só o estilo (por exemplo, .jsOn .someClass{}) e não-js-só o estilo (por exemplo, .jsOff .someOtherClass{}).Você pode usá-lo para fornecer uma alternativa para <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Você também pode usar Javascript para carregar o conteúdo de outro arquivo de origem e saída.Que pode ser um pouco mais caixa preta-é que você está procurando embora.

Aqui está um exemplo para o oculto div forma:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(Você provavelmente terá que ajustá-lo para os pobres IE, mas você começa a idéia.)

A minha solução

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

Alex artigo vem à mente aqui, no entanto, é somente aplicável se você estiver usando ASP.NET - pode ser emulado no JavaScript, no entanto, mas, novamente, você teria que usar o documento.write();

Você pode definir a visibilidade de um parágrafo|div 'oculto'.

Em seguida, no 'onload' função, você pode definir a visibilidade para o "visível".

Algo como:

<body onload="javascript:document.getElementById(rec).style.visibility=visible"> visível" id="rec">Este texto oculto, a menos que o javascript disponíveis.</p>

Não há uma tag para isso.Seria necessário o uso de javascript para mostrar o texto.

Algumas pessoas já sugeriu o uso de jquery para definir dinamicamente CSS visível.Você também pode gerar dinamicamente o texto com document.getElementById(id).innerHTML = "My Content" ou criar dinamicamente os nós, mas o CSS hack é, provavelmente, o mais fácil de ler.

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