2009-09-16 21 views
21

Digamos, tengo el código HTML siguiente manera:Cómo envolver <noscript> etiqueta para ocultar el contenido cuando Javascript desactivar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
This is content. 
</body> 
</html> 

Y quiero añadir una etiqueta <noscript> allí. Lo que significa que, si JavaScript está deshabilitado, se mostrará como una página en blanco.

Y solo cuando JavaScript esté desactivado, se mostrará "This is content text".

Por favor, dame algunos ejemplos para lograr. Gracias.

Respuesta

4

Es un poco extraño.

Ni siquiera necesita un 'noscript' para esto. Usted sólo puede tener una primera página en blanco, que es sólo el contenido es un javascript de la forma:

document.location = '/realpage.htm'; 

Y luego llamar a ese OnLoad, con jQuery, o lo que sea. Esto significará que si el cliente no tiene scripting, no irá a ninguna parte, por lo tanto, la página permanece en blanco.

Editar:

ejemplo, conforme a lo solicitado:

<html> 
<body onload="document.location = 'realpage.html';"> 
</body> 
</html> 
+0

hi sedoso, Quiero probar su manera también. Pero debido a la falta de conocimiento. No se como hacer ¿Puedes escribir el código de muestra para que lo pruebe? Gracias. –

+0

Gracias por su respuesta sedosa. Lo tengo. –

+0

A menos que su sitio solo permita que un usuario acceda a él a través de una página de puerta de enlace, necesita dos páginas para cada página que desea mostrar. ¿Sí? O solo tiene sitios web de una página. – BillR

4

La etiqueta noscript funciona al revés. Para hacer que el contenido visible cuando se habilita la escritura, lo puso en un elemento que está oculto, y demostrar que el uso de secuencias de comandos:

<div id="hasScript" style="display:none"> 
This is content 
</div> 
<script>document.getElementById('hasScript').style.display='';</script> 
21

Wrap todo lo que los contenidos dentro de un div principal con pantalla de ninguno y en la función onload cambiar la mostrar para bloquear

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <div id="divMain" style="display: none"> 
    This is content. 
    </div> 
<noscript> 
    JS not enabled 
</noscript> 
<script> 
    document.getElementById("divMain").style.display = "block"; 
</script> 
</body> 
</html> 
+0

gracias, está funcionando. Solo quiero saber otra pregunta que, incluso si agregamos la etiqueta noscript, ¿aún pueden ver el código fuente? –

+0

Sí, por supuesto, noscript no tiene nada que ver con la generación de HTML. – rahul

+0

ah okie. Gracias por su respuesta rápida y rápida. –

0

Se podría hacer algo como

<body id="thebody"> 
    this is content. 
    <script> 
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!"; 
    </script> 
</body> 
50

Una alternativa a un enfoque JS según lo sugerido por Rahul es mostrar un div en el elemento <noscript>, que cubre toda la página:

<noscript> 
    <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
       height: 100%; width: 100%; background-color: #FFFFFF"> 
     <p style="margin-left: 10px">JavaScript is not enabled.</p> 
    </div> 
</noscript> 
+0

¡Esta es una gran solución, gracias! – jkraybill

+21

Brillante! lo recomendaría pero no tengo javascript habilitado .. :-) –

+0

Obtuviste mi voto favorable porque es exactamente lo que quería hacer, pero necesitaba ayuda con los atributos de estilo. – TecBrat

2

Esto DEBERÍA realmente funciona! ocultar un contenido cuando JavaScript no está activado Nota: puede reemplazar con <noscript><noembed> o <noframes>, también.

<!-- Normal page content should be here: --> 
Content 
<!-- Normal page content should be here: --> 
<noscript> 
<div style="position: absolute; right: 0; bottom: 0; 
    display: none; visibility: hidden"> 
</noscript> 
<-- Content that should hide begin --> 
**Don't Show! Content** 
<-- Content that should hide begin --> 
<noscript> 
</div> 
</noscript> 
<!-- Normal page content should be here: --> 
Content 
<!-- Normal page content should be here: --> 
-1

Mostrar un mensaje Your browser does not support JavaScript! después de que redireccionan a otra página

<noscript>Your browser does not support JavaScript! 
    window.location.href = "http://example.com" // redirect to other page 
    </noscript> 
+4

'window.location.href' no funcionará, ya que JavaScript está deshabilitado. –

1

tuve un mismo problema:

quería mostrar el sitio completo cuando se habilitó Javascript. Sin embargo, si javascript estuviera deshabilitado, no solo quería mostrar un mensaje "este sitio requiere javascript ...", sino que quería mostrar el encabezado & (que reside en header.inc y footer.inc, llamado por cada página de contenido) de mi sitio (para verse bien).En otras palabras, solo quería reemplazar el área de contenido principal de mi sitio. Aquí está mi solución de HTML/CSS:

header.inc archivo (ubicación no es importante):

<noscript> 
    <style> 
     .hideNoJavascript { 
      display: none; 
     } 
     #noJavascriptWarning { 
      display: block !important; 
     } 
    </style> 
</noscript> 

Archivo de cabecera (abajo):

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div> 
<div class="container-fluid hideNoJavascript"> 
<!-- regular .php content here --> 

archivo CSS:

#noJavascriptWarning { 
    color: #ed1c24; 
    font-size: 3em; 
    display: none; /* this attribute will be overridden as necessary in header.inc */ 
    text-align: center; 
    max-width: 70%; 
    margin: 100px auto; 
} 

En resumen, mi mensaje "javascript required" está oculto según mi regla de CSS predeterminada. Sin embargo, cuando el navegador analiza la etiqueta, anula la regla predeterminada, lo que da como resultado que el contenido principal se oculte y (todo excepto el encabezado/pie de página) y el mensaje de javascript que se muestra. Funciona perfectamente ... ¡para mis necesidades! Con suerte alguien encuentra este útil :-)

Éstos son dos capturas de pantalla con Javascript activado/desactivado:

enter image description here

enter image description here

0

Tanto la etiqueta de estilo y de la meta de refresco hacer el trabajo en el interior noscript :

<noscript> 

<style>body { display:none; }</style> 

<meta http-equiv="refresh" content="0; url=blankpage.html"> 

</noscript> 

La primera línea se mostrar la página actual pero vacía. la segunda línea se redirigirá a blankpage.html

Cuestiones relacionadas