javascript - identifica - noscript para que sirve
¿No deberíamos usar el elemento<noscript>? (11)
Aunque Tor Valamo tiene una respuesta elegante a este problema, hay un problema que puede hacer que opte por no usar esta técnica.
El problema es (generalmente) IE. Tiene la tendencia de cargar y ejecutar el JS un poco más lento que otros navegadores haciendo que a veces parpadee el div "Please Enable Your Javascript" por una fracción de segundo antes de que luego cargue el JS y oculte el div.
Es molesto y para evitar esto puedes implementar el "clásico". <noscript> enfoque de redirección.
<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>
Esta es la técnica más sólida que he encontrado con respecto a este pequeño desagradable.
Encontré algunas buenas desventajas aquí:
El elemento noscript solo detecta si el navegador tiene JavaScript habilitado o no. Si JavaScript está desactivado en el Firewall en lugar de en el navegador, el JavaScript no se ejecutará y el contenido del elemento noscript no se mostrará.
Muchos scripts dependen de una característica o características específicas del idioma soportado para que puedan ejecutarse (por ejemplo, document.getElementById). Cuando las características requeridas no son compatibles, JavaScript no puede ejecutarse, pero dado que el propio JavaScript es compatible, el contenido de noscript no se mostrará.
El lugar más útil para usar el elemento noscript está en el encabezado de la página donde sería capaz de determinar de forma selectiva qué hoja de estilo y meta elementos se aplicarán a la página a medida que se carga, en lugar de tener que esperar hasta que se cargue la página. Lamentablemente, el elemento noscript solo es válido dentro del cuerpo de la página y, por lo tanto, no se puede usar en la cabecera.
El elemento noscript es un elemento de nivel de bloque y, por lo tanto, solo se puede usar para mostrar bloques completos de contenido cuando JavaScript está desactivado. No puede ser usado en línea
Idealmente, las páginas web deberían usar HTML para el contenido, CSS para la apariencia y JavaScript para el comportamiento. Usar el elemento noscript es aplicar un comportamiento desde el HTML en lugar de aplicarlo desde JavaScript.
Fuente: http://javascript.about.com/od/reference/a/noscriptnomore.htm
Estoy muy de acuerdo con el último punto. ¿Hay alguna forma de crear y agregar un archivo externo de <noscript> ? ¿Deberíamos colocar <noscript> en el <head> ?
Como todas las cosas, use la herramienta adecuada para el trabajo.
Si está utilizando la API de Google Maps, tiene una imagen estática mediante una etiqueta y eso se reemplaza con un mapa dinámico de JS. Google recientemente comenzó a cobrar por todo lo que con el ejemplo anterior le va a costar dos veces, una para la estática y otra para la dinámica. El mapa estático solo es relevante si JS está desactivado. Por lo tanto, para ahorrar el doble pago me parece que la mejor solución es envolver la etiqueta para el mapa estático en una etiqueta.
Creo una altura completa, ancho completo, posición: div fijo en todas las páginas con algún id.
<div id=''noscript_div'' style=''position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;''>enable JS buddy</div>
$(''#noscript_div'').hide();
$(document).ready(function(event){
});
No soy un experto . Esto funcionó para mí. Lo siento pero, este caso solo se adaptará si desea que el usuario tenga habilitada su javascript siempre
Después de reflexionar durante muchos días y cambiar mi código de ida y vuelta, creo que ahora tengo una imagen más clara y me gustaría compartir mis dos centavos sobre el tema antes de que me olvide.
<div id=''noscript''>show non-js content</div>
<script>document.getElementById(''noscript'').style.display=''none'';</script>
<script id=''required script''>show js content</script>
vs
<noscript>show non-js content</noscript>
<script id=''required script''>//show js content</script>
Dependiendo de la situación, hay tres casos para consideración:
Caso 1 - Si el script requerido está en línea
JavaScript deshabilitado
- El contenido en el elemento
<noscript>aparece inmediatamente, se muestra el contenido que no es js - El contenido en el elemento
<div>aparece inmediatamente, se muestra el contenido que no es js
JavaScript habilitado
- El contenido en el elemento
<noscript>no aparece en absoluto, se muestra el contenido de js - El contenido en el elemento
<div>puede aparecer momentáneamente antes de ocultarse, se muestra el contenido de js
Para este caso, usar el elemento <noscript> es ventajoso.
Caso 2: si el script requerido proviene de una fuente externa (de terceros), pero el ocultamiento del elemento <div> se realiza con un script en línea
JavaScript deshabilitado
- El contenido en el elemento
<noscript>aparece inmediatamente, se muestra el contenido que no es js - El contenido en el elemento
<div>aparece inmediatamente, se muestra el contenido que no es js
JavaScript habilitado pero el script requerido está bloqueado
- El contenido en el elemento
<noscript>no aparece en absoluto, ¡no se muestra nada! - El contenido en el elemento
<div>puede aparecer momentáneamente antes de ocultarse, ¡no se muestra nada!
JavaScript habilitado y script requerido es recibido
- El contenido en el elemento
<noscript>no aparece en absoluto, se muestra el contenido de js - El contenido en el elemento
<div>puede aparecer momentáneamente antes de ocultarse, se muestra el contenido de js
Para este caso, usar el elemento <noscript> es ventajoso.
Caso 3: si el script requerido oculta el elemento <div>
JavaScript deshabilitado
- El contenido en el elemento
<noscript>aparece inmediatamente, se muestra el contenido que no es js - El contenido en el elemento
<div>aparece inmediatamente, se muestra el contenido que no es js
JavaScript habilitado pero el script requerido está bloqueado
- El contenido en el elemento
<noscript>no aparece en absoluto, ¡no se muestra nada! - Aparece el contenido en el elemento
<div>, se muestra el contenido que no es js
JavaScript habilitado y script requerido es recibido
- El contenido en el elemento
<noscript>no aparece en absoluto, se muestra el contenido de js - El contenido en el elemento
<div>puede aparecer momentáneamente antes de ocultarse, se muestra el contenido de js
Para este caso, usar el elemento <div> es ventajoso.
En resumen
Utilice el elemento <noscript> si la representación del contenido HTML depende de scripts de terceros o si el script requerido está en línea. De lo contrario, use el elemento <div> y asegúrese de que el script requerido contenga:
document.getElementById(''noscript'').style.display=''none'';
El elemento "noscript" no se admite en XML o en XHTML5 políglota, por lo que no es recomendado por el W3C.
Tampoco me gusta la idea de que cada página comience con un div visible sin script oculto por algún truco de circo Javascripted en cada página de un sitio web. Dependencias peligrosas y más secuencias de comandos que podrían fallar o causar estragos si un desarrollador posterior las cambiara.
Una mejor estrategia es diseñar su sitio con un diseño html básico que envuelva todo el contenido del guión interno para que el usuario vea al menos un diseño de página con un encabezado y un lugar donde aparezca el contenido básico. Si está vacío es bastante obvio que no pueden ver el contenido por una razón. Luego agregaría un pequeño mensaje o ícono de información en el pie de página diciendo que, si no ve contenido, su javascript está deshabilitado. Eso aparece si ven contenido con guiones o no. Esta solución es libre de secuencias de comandos.
No es tan atractivo como proporcionar contenido alternativo o un cuadro de mensaje, pero en el caso de los sitios web pesados de Angular tendría que crear una nueva página de contenido para ellos de todos modos en caso de que las secuencias de comandos se deshabiliten. Un mensaje no va a ayudar.
Esta solución tampoco tiene en cuenta la compatibilidad con scripts en un agente de usuario en comparación con el soporte para personas con discapacidad, y hace que su página web 100% XML y HTML5 sea compatible con todos los agentes de usuario al evitar la etiqueta noscript.
En el futuro (afortunadamente cercano), podrás usar CSS scripting :
@media (scripting: none) {
/* styles for when JS is disabled */
}
En estos días, parece que casi todos los navegadores ejecutan Javascript, pero nunca se sabe quién va a acceder a su sitio. En estos días, incluso los lectores de pantalla y los rastreadores web usan Javascript, y algunas veces hacen solicitudes AJAX si es necesario.
Dicho esto, si vas a recurrir a no-Javascript, hay una forma mucho mejor que una etiqueta <noscript> . Simplemente haga esto en el HEAD de su documento:
<script type="text/javascript">
document.getElementsByTagName(''html'')[0].className += '' Q_js''; // better than noscript
</script>
Con esta técnica, puede referirse fácilmente a la clase Q_js en su CSS para ocultar cosas. Con la etiqueta <noscript> , lo mejor que puede esperar es incluir un archivo CSS adicional para anular el CSS anterior. Esto se vuelve importante cuando se supone que algunos elementos con contenido estático se ocultan de inmediato (no parpadean) hasta que Javascript pueda hacerlos más dinámicos.
En resumen, la técnica que sugerí aborda todas tus contras 1-5, y creo que es estrictamente mejor que usar <noscript> .
Es mejor que el valor predeterminado no sea javascript, y luego permita que un código javascript sobrescriba con una página javascript habilitada. No tiene que ser mucho. Puede ser solo una display:none; bloque, que luego se configura para display:block; por javascript, y viceversa para la página que no es js.
La idea simple es que en este momento su sitio web puede adaptarse a ningún uso de JavaScript en dispositivos lentos usando la etiqueta noscript como una entidad para todo el contenido de su sitio web ** ( su html debe estar preparado para ningún javascript y todos los controles deben funcionar también si JavaScript está desactivado, los usuarios que usan controles html básicos deberían ser capaces de hacer todo lo que hacían antes cuando javascript estaba activo. Así <noscript></noscript> puede ser el cambio dinámico al mismo contenido de otra manera con los mismos resultados = resolviendo el problema que es la razón por la que los usuarios abren su url ). ** Puede ver que no importa si JavaScript está o no presente, la funcionalidad del sitio web puede ser "igual" en cualquier caso js habilitado / deshabilitado. En dispositivos lentos chinos, por ejemplo: Samsung neo mini teléfono: este método puede ejecutar un sitio web sin retrasos en el tráfico de Internet bajo. Intente ejecutar este sitio web auto functionallity doble si js está activado / desactivado casos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
$(''noscript'').replaceWith(function() {
return this.textContent || this.innerText;
});
$("p#javascripton").css("background-color", "yellow");
$("p").click(function(){
$(this).hide();
});
});
//-->
</SCRIPT>
<noscript>
<p>
Noscript''s usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer''s views so entirely Planet''s beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser''s javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>
y para decir más sobre esto ... right noscript fue inventado para funcionar como un disparador cuando js está deshabilitado, pero puedes evitar esta característica para cambiar el curso de la funcionalidad de internet sobre cómo está ahora, para cambiar su dinámica ...
Te recomiendo que no uses <noscript> , puedes usar el siguiente código:
<HTML>
<head>
<script>
window.location="some-page.php";
</script>
</head>
<body>
<p>
Please active JavaScript .
</p>
</body>
</HTML>
si bajo ninguna circunstancia JS está habilitado, se mostrará el mensaje; de lo contrario, el usuario será redirigido a la página de destino.
Una aplicación útil para noscript que he visto es una carga asíncrona progresivamente mejorada de contenido pesado (especialmente "debajo del pliegue"). Las imágenes grandes, iframes, etc. se pueden incluir en noscript en la fuente HTML, y luego los elementos desempaquetados se pueden agregar a la página usando JavaScript después de que DOM esté listo. Esto desbloquea la página y puede proporcionar una experiencia de carga inicial mucho más rápida, especialmente si su interfaz depende de las interacciones JS / JQ aplicadas después de que el documento está listo (2 segundos frente a 6 segundos para una página de cartera que consulté).