Comment un site peut-il détecter instantanément que le javascript a été désactivé ?

Question

Comment un site peut-il détecter instantanément que le javascript a été désactivé ?

Demandé el 24 de Juillet, 2012: Quand la question a-t-elle été
2736 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Normalement, lorsqu'une page est chargée et que le navigateur a désactivé le Javascript, nous utilisons la fonction <noscript> pour écrire quelque chose comme un avertissement et dire au client d'activer Javascript. Cependant, Facebook, même après vous chargez la page avec JS activé, dès qu'il est désactivé vous recevez une notification. Comment puis-je faire quelque chose comme ça ?

MISE À JOUR : Ce mécanisme n'est plus disponible dans Facebook, mais il l'était auparavant. J'ai posé cette question trop tard, mais si une réponse est trouvée, je l'apprécierais vraiment.

Ce que j'ai essayé

J'ai pensé avoir un segment à l'intérieur de ma page qui continue à vérifier si le Javascript est désactivé, et si oui, montrer le contenu du fichier <noscript> .

Pour réaliser cela, j'ai créé une page CheckJS.html .

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="refresh" content="0">
</head>
<body>
    <noscript>
       JS is disabled!
    </noscript>
</body>
</html>

Cette page va continuer rafraîchissant lorsque JS est désactivé, JS est désactivé ! apparaîtra.

Pour ajouter cette page à l'intérieur de ma page originale. J'ai essayé ce qui suit :

1- .load()

J'ai utilisé JQuery à .load('CheckJS.html') à l'intérieur d'un div . Cependant, il semble que .load() ne charge que le contenu du fichier <body> de CheckJS.html . Signifie que le <head> et ce qui s'y trouve ne sera pas chargé dans l'élément div .

2- iframe

Après quelques recherches, j'ai découvert que la seule façon possible de charger une COMPLET page html y compris <head> est d'utiliser un <iframe> .

<iframe src="CheckJS.html"></iframe>

Cependant, le <meta http-equiv="refresh" content="0"> de CheckJS.html affecte la page parent, la page originale elle-même a commencé à se rafraîchir.

Si nous sommes capables d'utiliser cette <iframe> sans forcer l'actualisation de la page d'origine, cela pourrait être une solution, mais même si cette solution est trouvée, j'ai l'impression qu'il s'agit plutôt d'un problème de sécurité. astuce plutôt qu'un réel solution.

UPDATE

Antony Réponse de la Commission a prouvé que j'avais tort sur le fait que le iframe rafraîchit la page d'origine, le navigateur montre qu'il s'agit d'un rafraîchissement, mais en réalité, ce n'est pas le cas. Si c'est le cas, Javascript peut être évité. CheckJS.html que j'ai fourni fait l'affaire, et mieux encore, les <noscript> sera caché lorsque JS sera réactivé. Cependant, l'approche iframe n'est pas très conviviale (elle peut bloquer le navigateur), à moins que le rafraîchissement ne se produise toutes les 10 secondes environ, ce qui n'est pas un problème. détection instantanée .

Demandé el 24 de Juillet, 2012 par Ali Bassam

Answer 1

5 Réponses

Answer 2

15voto

Antony Points 8796

Solution CSS

Voir DEMO . Également disponible en tant que Bibliothèque JS .

Arrêtez l'animation CSS en remplaçant continuellement l'élément par du JavaScript. Une fois JavaScript désactivé, l'animation CSS se déclenche et affiche un message.

@keyframes Compatibilité des navigateurs : 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>

Répondu el 8 de Février, 2013 par Antony (8796 Points )

Answer 3

6voto

karim79 Points 178055

Hrm, je pense que cela dépend du navigateur. HTML5 supporte <noscript> dans l'élément HEAD, vous pouvez donc essayer quelque chose comme ceci :

<style>
    .noscriptMessage {
         display: none;
     }
</style>
<noscript>
    <style>
        .noscriptMessage {
             display: block
        }
    </style>
</noscript>

<body>
    <div class=".noscriptMessage">Foo bar baz</div>
    ...
</body>

Spec : http://dev.w3.org/html5/markup/noscript.html

De la spécification :

Contenu autorisé : Au moins un des éléments suivants : un élément link, ou un meta http-equiv=default-style, ou un élément meta http-equiv=refresh ou un élément de style

Edit : hey peeps, SO fait exactement la même chose ! Essaie juste de désactiver JS maintenant.

Répondu el 24 de Juillet, 2012 par karim79 (178055 Points )

Answer 4

2voto

artistoex Points 983

Que diriez-vous d'un code javascript qui reporte continuellement un rafraîchissement http-equiv=refresh (en remplaçant chaque fois le méta-élément) ? Dès que le javascript est désactivé, le méta-élément n'est plus remplacé et le rafraîchissement finit par avoir lieu. Ce n'est qu'une idée, je n'ai aucune idée si l'insertion de méta-éléments est possible.

Répondu el 24 de Juillet, 2012 par artistoex (983 Points )

Answer 5

1voto

JoshMock Points 849

Je vous recommande d'examiner la façon dont HTML5 Boilerplate et Modernizr s'y prennent.

Si vous regardez le HTML de HTML5 Boilerplate, sur ligne 7 vous verrez le <html> L'étiquette se voit attribuer une classe de no-js . Ensuite, lorsque le JavaScript de Modernizr s'exécute, la première chose qu'il fait, c'est de supprimer la balise no-js classe.

Cela fait, vous pouvez appliquer des règles CSS qui n'affichent le contenu que si l'option no-js est présente :

#no-script-message {
    display: none;
}
.no-js #no-script-message {
    display: block;
}

Répondu el 24 de Juillet, 2012 par JoshMock (849 Points )

Answer 6

-1voto

Nick Tomlin Points 4258

Dans le prolongement de la réponse de @JoshMock, voici une approche simple (via Paul Irish ) pour détecter si le client a activé JS :

HTML

<html class="no-js">
<head>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

Il devrait être compatible avec tous les navigateurs et est assez rapide. Ensuite, vous pouvez masquer/afficher des éléments dans votre css avec .js et .no-js classes.

Si vous effectuez une autre détection de caractéristiques, je vous suggère d'utiliser Modernizr avec le html class="no-js" (modernizr ajoutera automatiquement les classes js pour vous, ainsi que la détection css3).

Répondu el 7 de Février, 2013 par Nick Tomlin (4258 Points )

Comment un site peut-il détecter instantanément que le javascript a été désactivé ?

Ce que j'ai essayé

Réponses

Solution CSS

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment un site peut-il détecter instantanément que le javascript a été désactivé ?

Ce que j'ai essayé

Réponses

Solution CSS

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: