Existe um HTML oposto a <noscript>?

106

Existe uma tag em HTML que só exibirá seu conteúdo se o JavaScript estiver habilitado? Eu sei que <noscript>funciona ao contrário, exibindo seu conteúdo HTML quando o JavaScript está desligado. Mas eu gostaria de exibir um formulário em um site apenas se o JavaScript estiver disponível, dizendo a eles por que eles não podem usar o formulário se não o tiverem.

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

javascript html noscript

— Re0sless
fonte

56

Você poderia ter um div invisível que é mostrado via JavaScript quando a página carrega.

— ceejayoz
fonte

217

A maneira mais fácil que posso pensar:

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

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

Sem document.write, sem scripts, puro CSS.

— Vai
fonte

11

Não permitido no padrão xhtml, pelo menos.

— Dykam

29

@Dykam: é permitido em HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element e, na prática, é compatível com praticamente todos os navegadores.

— Será em

3

É aconselhável usar display: none !important, para evitar que seja sobrescrito por regras mais específicas (por exemplo, por seletores id ou css), que são destinadas para seu uso quando os scripts estão habilitados.

— Istador

3

Um aviso: as versões atuais do Chrome não analisam as tags dentro de um <noscript>na primeira vez que você atualiza uma página após desativar o Javascript nas preferências. Você precisa clicar em recarregar duas vezes para fazê-lo funcionar.

— Tobia

2

Limpo, conciso, não usa javascript. Eu gosto disso.

— Dragas

8

Eu realmente não concordo com todas as respostas aqui sobre incorporar o HTML de antemão e ocultá-lo com CSS até que seja mostrado novamente com JS. Mesmo sem o JavaScript habilitado, esse nó ainda existe no DOM. É verdade que a maioria dos navegadores (mesmo navegadores de acessibilidade) irá ignorá-lo, mas ele ainda existe e pode haver momentos estranhos em que isso volte a incomodá-lo.

Meu método preferido seria usar jQuery para gerar o conteúdo. Se for muito conteúdo, então você pode salvá-lo como um fragmento de HTML (apenas o HTML que você deseja mostrar e nenhuma das tags html, body, head, etc.) e usar as funções ajax do jQuery para carregá-lo no a página inteira.

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>

— Chris Bloom
fonte

8

Em primeiro lugar, sempre separe o conteúdo, a marcação e o comportamento!

Agora, se você estiver usando a biblioteca jQuery (você realmente deveria, isso torna o JavaScript muito mais fácil), o seguinte código deve servir:

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

Isso lhe dará uma classe adicional no corpo quando JS estiver habilitado. Agora, em CSS, você pode ocultar a área quando a classe JS não estiver disponível e mostrar a área quando JS estiver disponível.

Como alternativa, você pode adicionar no-jsa classe padrão à tag do corpo e usar este código:

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

Lembre-se de que ainda é exibido se o CSS estiver desabilitado.

— alexanderpas
fonte

3

Tenho uma solução simples e flexível, um pouco semelhante à de Will (mas com a vantagem adicional de ser um HTML válido):

Dê ao elemento do corpo uma classe de "jsOff". Remova (ou substitua) por JavaScript. Tenha CSS para ocultar qualquer elemento com uma classe "jsOnly" com um elemento pai com uma classe "jsOff".

Isso significa que se o JavaScript estiver habilitado, a classe "jsOff" será removida do corpo. Isso significa que os elementos com uma classe "jsOnly" não terão um pai com uma classe "jsOff" e, portanto, não corresponderão ao seletor CSS que os oculta, portanto, eles serão mostrados.

Se o JavaScript estiver desabilitado, a classe "jsOff" não será removida do corpo. Elementos com "jsOnly" terão um pai com "jsOff" e assim terá corresponderão ao seletor CSS que os oculta, portanto, 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>

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

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

Observe que o JavaScript que remove a classe "jsOff" deve ser executado o mais cedo possível dentro da tag body. Não pode ser executado antes, pois a tag do corpo ainda não estará lá. Não deve ser executado posteriormente, pois significa que os elementos com a classe "jsOnly" podem não ser visíveis imediatamente (pois eles corresponderão ao seletor CSS que os oculta até que a classe "jsOff" seja removida do elemento do corpo).

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

.jsOn .noJsOnly{
    display:none;
}

— Spycho
fonte

1

Você também pode usar Javascript para carregar conteúdo de outro arquivo de origem e gerá-lo. Isso pode ser um pouco mais caixa-preta do que você está procurando.

— O Smurf
fonte

1

Aqui está um exemplo para o método div oculto:

<!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 teria que ajustá-lo para o IE pobre, mas essa é a ideia.)

— Shadow2531
fonte

1

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>

— prgDevelop
fonte

Em seu exemplo html, você não quer terminar as linhas com </span>?

— curto

0

O artigo de Alex vem à mente aqui, no entanto, só é aplicável se você estiver usando ASP.NET - ele poderia ser emulado em JavaScript, mas novamente você teria que usar document.write ();

— Ross
fonte

0

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

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

Algo como:

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

0

Não existe uma etiqueta para isso. Você precisaria usar javascript para mostrar o texto.

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

— cpm
fonte

0

Na década desde que essa pergunta foi feita, o HIDDENatributo foi adicionado ao HTML. Ele permite ocultar elementos diretamente sem usar CSS. Tal como acontece com as soluções baseadas em CSS, o elemento deve ser ocultado pelo script:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>

— Mandril
fonte