tablas - obtener datos de una tabla html javascript
¿Cómo puede un sitio detectar instantáneamente que JavaScript ha sido deshabilitado? (6)
Normalmente, cuando se carga una página y el navegador tiene Javascript deshabilitado, usamos la etiqueta <noscript> para escribir algo como una advertencia y decirle al cliente que habilite Javascript. Sin embargo, Facebook, incluso después de cargar la página con JS habilitado, en el momento en que se desactiva, recibe una notificación. ¿Cómo puedo hacer algo como esto?
ACTUALIZACIÓN: Este mecanismo ya no está disponible en Facebook, pero antes, era demasiado tarde para hacer esta pregunta, pero si se encuentra alguna respuesta, realmente lo agradecería.
Lo que he intentado
Pensé en tener un segmento dentro de mi página que compruebe continuamente si Javascript está deshabilitado, si es así, muestre el contenido de <noscript> .
Para lograr esto, creé una página CheckJS.html .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0">
</head>
<body>
<noscript>
JS is disabled!
</noscript>
</body>
</html>
Esta página seguirá actualizándose , cuando JS esté deshabilitado, ¡ JS esté deshabilitado! aparecerá.
Para agregar esta página dentro de mi página original. Intenté lo siguiente:
1- .load ()
.load(''CheckJS.html'') JQuery para .load(''CheckJS.html'') dentro de un div . Sin embargo, parece que .load() solo carga el contenido del <body> de CheckJS.html . Significa el elemento <head> y lo que está dentro no se cargará dentro del div .
2- iframe
Después de algunas búsquedas, descubrí que la única forma posible de cargar una página html COMPLETA que incluye <head> es usar un <iframe> .
<iframe src="CheckJS.html"></iframe>
Sin embargo, el <meta http-equiv="refresh" content="0"> de CheckJS.html afecta a la página principal, la página original comenzó a actualizarse.
Si podemos usar este <iframe> sin forzar la actualización de la página original, entonces esto podría ser una solución, pero incluso si se encuentra esta solución, siento que es más un truco que una solución real .
ACTUALIZAR
La respuesta de Antony demostró que estaba equivocado acerca de que el iframe actualiza la página original, el navegador muestra que es refrescante, pero en realidad no, si es así, entonces se puede evitar Javascript, el CheckJS.html que proporcioné hace el trabajo , e incluso mejor, el <noscript> se <noscript> cuando JS se vuelva a habilitar. Aún así, todo este enfoque de iframe no es tan fácil de usar (podría congelar el navegador), a menos que la actualización se produzca cada 10 segundos aproximadamente, lo que no es una detección instantánea .
Solución CSS
Ver DEMO . También disponible como una biblioteca JS .
Detenga la animación CSS reemplazando continuamente el elemento con JavaScript. Una vez que JavaScript está deshabilitado, la animación CSS se activa y muestra un mensaje.
@keyframes navegador @keyframes : Chrome, Firefox 5.0+, IE 10+, Opera 12+, Safari 4.0+
<style>
.nojs_init {
position: relative;
animation:nojs-animation 0.2s step-end;
-moz-animation:nojs-animation 0.2s step-end; /* Firefox */
-webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */
-o-animation:nojs-animation 0.2s step-end; /* Opera */
}
@keyframes nojs-animation
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-moz-keyframes nojs-animation /* Firefox */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-webkit-keyframes nojs-animation /* Safari and Chrome */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-o-keyframes nojs-animation /* Opera */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
</style>
<body>
<div id="content"></div>
<div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div>
</body>
<script>
document.getElementById("content").innerHTML = ''JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.'';
var elm = document.getElementById("nojs"),
animation = false,
animationstring = ''animation'',
keyframeprefix = '''',
domPrefixes = ''Webkit Moz O ms Khtml''.split('' ''),
pfx = '''';
if( elm.style.animationName ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + ''AnimationName'' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + ''Animation'';
keyframeprefix = ''-'' + pfx.toLowerCase() + ''-'';
animation = true;
break;
}
}
}
// Continuously replace element
function jsdetect() {
var elm = document.getElementById("nojs");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
// Only apply to browsers that support animation
if (animation) {
elm.innerHTML = ''JavaScript is <span style="font-weight:bold;">disabled</span>.'';
setInterval(jsdetect, 0);
}
</script>
¿Qué pasa con el código javascript que pospone continuamente un http-equiv = refresh (cada vez que se reemplaza el elemento meta)? Tan pronto como se desactiva javascript, el elemento meta ya no se reemplaza y la actualización finalmente tendrá lugar. Esto es solo un pensamiento, no tengo ni idea de si la inserción del elemento meta es posible.
Ampliando la respuesta de @ JoshMock, aquí hay un enfoque simple (a través de Paul Irish ) para detectar si el cliente tiene JS habilitado:
HTML
<html class="no-js">
<head>
<script>(function(H){H.className=H.className.replace(//bno-js/b/,''js'')})(document.documentElement)</script>
Esto debería ser compatible con todos los navegadores y es bastante rápido. Luego puede ocultar / mostrar elementos en su css con clases .js y .no-js .
Si está realizando cualquier otra detección de características, sugeriría usar Modernizr con la html class="no-js" (modernizr agregará automáticamente las clases js para usted, junto con la detección css3).
En realidad, es más fácil detectar si el navegador soporta java-script que lo contrario.
Por supuesto, esto es en el caso de ''un sitio detecta javascript al instante''. Witch es la primera respuesta http-request <--> del navegador al servidor. Usted simplemente ''no puede''. Tendría que enviar otra solicitud al servidor después de determinar las capacidades del navegador.
Ahora, no hay forma de verificar si JavaScript está habilitado desde el lado del servidor en la primera solicitud . Por lo tanto, si JavaScript está deshabilitado, debe hacer una devolución de datos o redireccionar a una página que no sea JavaScript, utilizando lo que algunos otros sugirieron (witch no es válido, pero parece funcionar):
<head>
<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html"></noscript>
...
</head>
Existen algunas ''capacidades de navegador'' y ''complementos'' de navegador que se pueden obtener con la solicitud http, por lo que necesitaría un buen script ''del lado del servidor'' para cumplir con su objetivo.
Consulte browserhawk o quirksmode para obtener información sobre un javascript para detectar el navegador.
Además, hay una pregunta ''protegida'' sobre how-to-detect-if-javascript-is-disabled
Hrm, creo que depende del navegador. HTML5 admite <noscript> en el elemento HEAD, por lo que puede intentar algo como esto:
<style>
.noscriptMessage {
display: none;
}
</style>
<noscript>
<style>
.noscriptMessage {
display: block
}
</style>
</noscript>
<body>
<div class=".noscriptMessage">Foo bar baz</div>
...
</body>
Especificaciones: http://dev.w3.org/html5/markup/noscript.html
De la especificación:
Contenidos permitidos: Cero o más de: un elemento de enlace, o un meta http-equiv = elemento de estilo predeterminado, o un meta http-equiv = actualizar elemento, o un elemento de estilo
Edit: hey peeps, SO hace lo mismo! Solo intenta apagar JS ahora.
Recomiendo ver cómo se hace esto con HTML5 Boilerplate y Modernizr.
Si observa el HTML de HTML5 Boilerplate, en la línea 7 verá que la etiqueta <html> recibe una clase de no-js . Luego, cuando se ejecuta el JavaScript de Modernizr, lo primero que hace es eliminar la clase no-js .
Una vez hecho esto, podría aplicar reglas CSS que solo muestren contenido si la clase no-js está presente:
#no-script-message {
display: none;
}
.no-js #no-script-message {
display: block;
}