¿Hay un HTML opuesto a <noscript>?

106

¿Existe una etiqueta en HTML que solo muestre su contenido si JavaScript está habilitado? Sé que <noscript>funciona al revés, mostrando su contenido HTML cuando JavaScript está desactivado. Pero me gustaría mostrar un formulario en un sitio solo si JavaScript está disponible, diciéndoles por qué no pueden usar el formulario si no lo tienen.

La única forma en que sé cómo hacer esto es con el document.write();método en una etiqueta de script, y parece un poco complicado para grandes cantidades de HTML.

javascript html noscript Re0sless
fuente

Respuestas:

56

Podría tener un div invisible que se muestra a través de JavaScript cuando se carga la página.

ceejayoz
fuente
217

La forma más fácil en la que puedo pensar:

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

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

Sin escritura de documentos, sin scripts, CSS puro.

Será
fuente
11
No permitido en el estándar xhtml al menos.
Dykam
29
@Dykam: está permitido en HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element y, en la práctica, es compatible con prácticamente todos los navegadores.
Será el
3
Es recomendable usarlo display: none !importantpara evitar que sea anulado por reglas más específicas (por ejemplo, por selectores de id o css), que están destinadas a su uso cuando los scripts están habilitados.
Istador
3
Una advertencia: las versiones actuales de Chrome no analizan las etiquetas dentro de una <noscript>la primera vez que actualiza una página después de deshabilitar Javascript en las preferencias. Debes presionar recargar dos veces para que funcione.
Tobia
2
Limpio, conciso, no usa javascript. Me gusta.
Dragas
8

Realmente no estoy de acuerdo con todas las respuestas aquí acerca de incrustar el HTML de antemano y ocultarlo con CSS hasta que se muestre nuevamente con JS. Incluso sin JavaScript habilitado, ese nodo todavía existe en el DOM. Es cierto que la mayoría de los navegadores (incluso los navegadores de accesibilidad) lo ignorarán, pero aún existe y puede haber momentos extraños en los que eso vuelva a molestarlo.

Mi método preferido sería usar jQuery para generar el contenido. Si tendrá mucho contenido, entonces puede guardarlo como un fragmento HTML (solo el HTML que querrá mostrar y ninguna de las etiquetas html, body, head, etc.) y luego use las funciones ajax de jQuery para cargarlo en la página completa.

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
fuente
8

En primer lugar, siempre separe el contenido, el marcado y el comportamiento.

Ahora, si está utilizando la biblioteca jQuery (realmente debería hacerlo, hace que JavaScript sea mucho más fácil), el siguiente código debería funcionar:

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

Esto le dará una clase adicional en el cuerpo cuando JS esté habilitado. Ahora, en CSS, puede ocultar el área cuando la clase JS no está disponible y mostrar el área cuando JS está disponible.

Alternativamente, puede agregar no-jscomo clase predeterminada a su etiqueta corporal y usar este código:

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

Recuerde que todavía se muestra si CSS está deshabilitado.

alexanderpas
fuente
3

Tengo una solución simple y flexible, algo similar a la de Will (pero con el beneficio adicional de ser HTML válido):

Dale al elemento body una clase de "jsOff". Elimine (o reemplace) esto con JavaScript. Tener CSS para ocultar cualquier elemento con una clase de "jsOnly" con un elemento padre con una clase de "jsOff".

Esto significa que si JavaScript está habilitado, la clase "jsOff" se eliminará del cuerpo. Esto significará que los elementos con una clase de "jsOnly" no tendrán un padre con una clase de "jsOff" y, por lo tanto, no coincidirán con el selector de CSS que los oculta, por lo que se mostrarán.

Si JavaScript está deshabilitado, la clase "jsOff" no se eliminará del cuerpo. Los elementos con "jsOnly" tendrán un padre con "jsOff" y también lo tendrá coincidirán con el selector de CSS que los oculta, por lo que estarán ocultos.

Aquí está el 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>

Es HTML válido. Es simple. Es flexible

Simplemente agregue la clase "jsOnly" a cualquier elemento que desee mostrar solo cuando JS está habilitado.

Tenga en cuenta que el JavaScript que elimina la clase "jsOff" debe ejecutarse lo antes posible dentro de la etiqueta del cuerpo. No se puede ejecutar antes, ya que la etiqueta del cuerpo aún no estará allí. No debe ejecutarse más tarde ya que significará que los elementos con la clase "jsOnly" pueden no ser visibles de inmediato (ya que coincidirán con el selector de CSS que los oculta hasta que la clase "jsOff" se elimine del elemento del cuerpo).

Esto también podría proporcionar un mecanismo para el estilo solo js (por ejemplo .jsOn .someClass{}) y el estilo no solo js (por ejemplo .jsOff .someOtherClass{}). Puede usarlo para proporcionar una alternativa a <noscript>:

.jsOn .noJsOnly{
    display:none;
}
Spycho
fuente
1

También puede usar Javascript para cargar contenido desde otro archivo fuente y generarlo. Sin embargo, eso puede ser un poco más de caja negra de lo que estás buscando.

El Pitufo
fuente
1

Aquí hay un ejemplo de la forma div oculta:

<!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>

(Probablemente tendrías que modificarlo para IE deficiente, pero entiendes la idea).

Sombra2531
fuente
1

Mi solución

.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
fuente
En su ejemplo de html, ¿no quiere terminar las líneas con </span>?
Corto
0

El artículo de Alex me viene a la mente aquí, sin embargo, solo es aplicable si está usando ASP.NET; sin embargo, podría emularse en JavaScript, pero nuevamente tendría que usar document.write ();

Ross
fuente
0

Puede establecer la visibilidad de un párrafo | div en 'oculto'.

Luego, en la función 'onload', puede establecer la visibilidad en 'visible'.

Algo como:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibilidad: visible" id = "rec"> Este texto se ocultará a menos que JavaScript esté disponible. </p>


fuente
0

No hay una etiqueta para eso. Necesitaría usar javascript para mostrar el texto.

Algunas personas ya sugirieron usar JS para establecer CSS visible de forma dinámica. También puede generar dinámicamente el texto con document.getElementById(id).innerHTML = "My Content"o crear dinámicamente los nodos, pero el truco CSS es probablemente el más sencillo de leer.

cpm
fuente
0

En la década desde que se hizo esta pregunta, el HIDDENatributo se agregó a HTML. Permite ocultar elementos directamente sin usar CSS. Al igual que con las soluciones basadas en CSS, el elemento debe estar oculto por 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>
Arrojar
fuente