mostrar - Cómo envolver la etiqueta<noscript> para ocultar el contenido cuando se deshabilita javascript
mostrar y ocultar texto en html (8)
Digamos, tengo un código HTML como este:
<!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 agregar 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é deshabilitado, mostrará "Este es el texto del contenido".
Por favor, dame algunos ejemplos para lograr Gracias.
¡Esto DEBE realmente funcionar! ocultar un contenido cuando javascript no está habilitado Nota: también puede reemplazar <noscript> por <noembed> o <noframes> .
<!-- 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: -->
Envuelva todo su contenido dentro de un div principal con la visualización ninguno y en la función onload cambie la visualización 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>
Es un poco extraño.
Ni siquiera necesitas un ''noscript'' para esto. Solo puede tener una primera página en blanco, cuyo único contenido es un javascript del formulario:
document.location = ''/realpage.htm'';
Y luego llámalo a OnLoad , con jQuery , o lo que sea. Esto significará que si el cliente no tiene secuencias de comandos, no irán a ninguna parte, por lo que la página permanecerá en blanco.
Editar:
Ejemplo, según lo solicitado:
<html>
<body onload="document.location = ''realpage.html'';">
</body>
</html>
La etiqueta noscript funciona al revés. Para hacer visible el contenido cuando el script está habilitado, colóquelo en un elemento oculto y muéstrelo usando el script:
<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById(''hasScript'').style.display='''';</script>
Podrías hacer algo como
<body id="thebody">
this is content.
<script>
document.getElementById(''thebody'').innerHTML = "<p>content when JS is enabled!";
</script>
</body>
Tuve un problema muy:
Quería mostrar el sitio completo cuando javascript estaba habilitado. Sin embargo, si javascript estaba deshabilitado, no solo quería mostrar un mensaje "este sitio requiere javascript ...", sino que también quería mostrar el encabezado y el pie de página (que residen en header.inc y footer.inc). 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 html / css:
Archivo Header.inc (la ubicación no es importante):
<noscript>
<style>
.hideNoJavascript {
display: none;
}
#noJavascriptWarning {
display: block !important;
}
</style>
</noscript>
Archivo de encabezado (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 "requiere javascript" está oculto por mi regla de CSS predeterminada. Sin embargo, cuando el navegador analiza la etiqueta, anula la regla predeterminada, lo que hace que se oculte el contenido principal y (todo, excepto el encabezado / pie de página) y el mensaje de javascript que se muestra. Funciona perfectamente ... para mis necesidades! Esperemos que alguien más encuentre esto útil :-)
Aquí hay dos capturas de pantalla con javascript habilitado / deshabilitado:
Una alternativa a un enfoque de JS como lo sugiere 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>
Tanto la etiqueta de estilo como la meta actualización NO funcionan dentro de noscript:
<noscript>
<style>body { display:none; }</style>
<meta http-equiv="refresh" content="0; url=blankpage.html">
</noscript>
La primera línea mostrará la página actual pero vacía. La segunda línea se redireccionará a blankpage.html