Come rilevare se JavaScript è disabilitato?


659

Stamattina c'è stato un post che chiedeva quante persone disabilitassero JavaScript. Poi ho iniziato a chiedermi quali tecniche potessero essere utilizzate per determinare se l'utente lo ha disabilitato.

Qualcuno conosce alcuni modi brevi / semplici per rilevare se JavaScript è disabilitato? La mia intenzione è di avvertire che il sito non è in grado di funzionare correttamente senza che il browser abbia JS abilitato.

Alla fine vorrei reindirizzarli a contenuti in grado di funzionare in assenza di JS, ma ho bisogno di questo rilevamento come segnaposto per iniziare.


Cosa vuoi fare con queste informazioni? Potrebbe cambiare la risposta che ricevi, ad esempio il miglioramento progressivo dovrebbe essere generalmente preferito rispetto al tentativo di rilevare JavaScript disabilitato e intraprendere azioni specifiche basate su quello.
Jonny Buchanan,

il miglioramento progressivo è quello che sto cercando. Voglio essere in grado di reindirizzarli a contenuti alternativi che funzioneranno correttamente in assenza di un browser abilitato o abilitato per JS.
MikeJ,

1
@expiredninja Questo post di Nicholas Zakas dice circa il 2%, anche se ha più di un anno.
sdleihssirhc,

Il modo più semplice è usare noscript per mostrare un sito non javascript e usare javascript per mostrare qualsiasi elemento dipendente da javascript modificando la visualizzazione dello stile.
Myforwik,

Risposte:


286

Presumo che tu stia cercando di decidere se fornire o meno contenuti con JavaScript. Le migliori implementazioni si degradano in modo pulito, in modo che il sito funzioni ancora senza JavaScript. Suppongo anche che tu intenda il rilevamento lato server , anziché utilizzare l' <noscript>elemento per un motivo inspiegabile.

Non esiste un buon modo per eseguire il rilevamento JavaScript sul lato server. In alternativa è possibile impostare un cookie tramite JavaScript , quindi testare quel cookie utilizzando gli script lato server nelle visualizzazioni di pagina successive. Tuttavia, ciò non sarebbe adatto per decidere quali contenuti fornire, in quanto non sarebbe in grado di distinguere i visitatori senza il cookie dai nuovi visitatori o visitatori che bloccano i cookie.


129
<noscript> È il modo più semantico accurato per specificare contenuti non javascript e piuttosto rilevare se javascript è disabilitato, rilevare se è abilitato. Quindi mostra il messaggio "hai bisogno di javascript per usare correttamente il mio sito" per impostazione predefinita, ma nascondilo con una funzione javascript immediatamente su Caricamento.
matt lohkamp,

58
@matt lohkamp: o addirittura nascondi il messaggio per impostazione predefinita, e metti un <style>blocco all'interno <noscript>per scoprire (nessun riflusso lì se JS abilitato). Sorprendentemente, questo funziona in tutti i browser moderni e anche in IE6
Piskvor ha lasciato l'edificio il

7
@matt - Lo stavo facendo da un po ', ma il messaggio rimane attivo per un po' su connessioni lente lasciando gli utenti confusi. Sono qui alla ricerca di una soluzione diversa. @Piskvor: il tag <noscript> nell'intestazione non verrà convalidato e un tag <style> nel corpo non verrà convalidato.
Ben

20
... tranne perché ti preoccupi della convalida? Stai convalidando solo per convalidare? Potrebbe non essere "corretto" ma se funziona e lo realizza "con un po 'di sporco sotto il cofano" qual è il problema? Non ti preoccupare, non giudicherò ;-)
keif

4
Rimane valido se usi semplicemente l'attributo style per gli elementi dati all'interno dei tag <noscript> (come <noscript> <div style = "color: red;"> blahblah </div> </noscript> o sg. Simili) . MA rimane valido anche se metti <style> BLOCK normalmente nell'intestazione che definisce lo stile di alcuni elementi classificati .noscript (o simili), e nel corpo, all'interno dei tag <noscript>, dai semplicemente agli elementi dati il classe .noscript precedentemente definita, in questo modo: <noscript> <div class = "noscript"> blahblah </div> </noscript>
Sk8erPeter

360

Vorrei aggiungere il mio .02 qui. Non è al 100% antiproiettile, ma penso che sia abbastanza buono.

Il problema, per me, con l'esempio preferito di mettere una sorta di messaggio "questo sito non funziona così bene senza Javascript" è che devi quindi assicurarti che il tuo sito funzioni bene senza Javascript. E una volta che hai iniziato su questa strada, inizi a capire che il sito dovrebbe essere a prova di proiettile con JS disattivato, e questo è un grosso pezzo di lavoro aggiuntivo.

Quindi, quello che vuoi davvero è un "reindirizzamento" a una pagina che dice "attiva JS, sciocco". Ma, naturalmente, non è possibile eseguire in modo affidabile meta reindirizzamenti. Quindi, ecco il suggerimento:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... dove tutto il contenuto del tuo sito è racchiuso in un div di classe "pagecontainer". Il CSS all'interno del tag noscript nasconderà quindi tutto il contenuto della tua pagina e mostrerà invece il messaggio "no JS" che vuoi mostrare. Questo è in realtà ciò che sembra fare Gmail ... e se è abbastanza buono per Google, è abbastanza buono per il mio piccolo sito.


12
Hai mai provato a convalidare google.com? la validazione determina solo quanto vicino il documento segue il foglio delle specifiche, non influisce in alcun modo sull'usabilità della pagina.
JKirchartz,

71
@JonasGeiregat Cosa c'è di sbagliato nel forzare l'utente a richiedere Javascript se la tua app Web è stata creata e richiede che Javascript funzioni? Ho sentito questo commento troppo spesso, ma è valido solo per i siti più semplici. Prova Facebook senza JS e guarda cosa succede. Se la tua app è stata costruita per Javascript, cosa c'è di sbagliato nel richiedere ciò che il 99% degli utenti ha abilitato comunque?
Lee Benson,

19
@Lee lo colpisce sull'unghia, puoi fare così tanto per l'utente prima di tracciare la linea su ciò che sosterrai. Ci aspettiamo che tutti gli utenti dispongano di un dispositivo abilitato a Internet, dovrei implementare anche una versione cartacea del mio sito per coloro che si rifiutano di accedere a Internet?
Kolors,

14
@Kolors, ho fatto quel commento nel marzo 2012, e direi che oggi è doppiamente vero. Da allora, abbiamo avuto Meteor, Angular.Js, Famo.us e un sacco di incredibili librerie che richiedono tutti Javascript per iniziare . Mi chiedo che cosa gli utenti che scelgono di disabilitare JS stiano effettivamente cercando di ottenere ... chiaramente, non navigano nella stessa rete del resto di noi e non c'è motivo per cui un'azienda debba ridimensionare il proprio sito Web per i più piccoli sottoinsieme di utenti testardi ...
Lee Benson,

6
Sì, e mi chiedevo perché non potevo votare la tua risposta, dato che ho dimenticato di attivare il mio JS :-)) Mi piace e implemento la tua soluzione! Grazie!
Garavani,

198

noscript i blocchi vengono eseguiti quando JavaScript è disabilitato e in genere vengono utilizzati per visualizzare contenuti alternativi a quelli generati in JavaScript, ad es

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Gli utenti senza js otterranno il next_pagecollegamento: qui è possibile aggiungere parametri in modo da sapere nella pagina successiva se sono arrivati ​​tramite un collegamento JS / non-JS o tentare di impostare un cookie tramite JS, la cui assenza implica JS è disabilitato. Entrambi questi esempi sono abbastanza banali e aperti alla manipolazione, ma hai capito.

Se vuoi un'idea puramente statistica di quanti dei tuoi utenti hanno disabilitato JavaScript, potresti fare qualcosa del tipo:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

quindi controlla i tuoi log di accesso per vedere quante volte questa immagine è stata colpita. Una soluzione leggermente grezza, ma ti darà una buona idea in termini percentuali per la tua base di utenti.

L'approccio sopra (tracciamento delle immagini) non funzionerà bene per i browser di solo testo o quelli che non supportano affatto js, ​​quindi se la tua base di utenti oscilla principalmente verso quell'area, questo potrebbe non essere l'approccio migliore.


7
Questo non è molto efficace. Ad esempio, non conterà nessuno con browser di solo testo, che normalmente non hanno il supporto JavaScript. Per lo meno, dovresti disabilitare la memorizzazione nella cache per quell'immagine.
Jim,

3
I browser che non supportano affatto JS non ignorerebbero semplicemente il tag noscript e mostrerebbero l'immagine?
LKM,

1
@LKM: dipende da come sono scritti, molto probabilmente lo farebbero, quindi lo trasformeresti in un punto 1x1px. Questa opzione è principalmente per il monitoraggio dei modelli di utilizzo sul lato server, quindi sarebbe comunque ok, poiché è attivata da un utente senza funzionalità javascript.
ConroyP

Nota che al momento esiste un bug con IE8 e il tag noscript se lo modifichi ... vedi positioniseverything.net/explorer.html
alex

2
inoltre puoi servire quell'immagine come uno script sul lato server, impostando il tipo mime e usarla per registrare alcune informazioni sull'utente o rilasciare un cookie ... px.sklar.com/code.html/id=256
JKirchartz

46

Questo è ciò che ha funzionato per me: reindirizza un visitatore se javascript è disabilitato

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

6
Questo non è valido Gli elementi noscript non possono contenere meta elementi. Non mi fiderei che funzioni in modo affidabile in tutti i browser (compresi i browser futuri in cui non è attualmente possibile eseguire il test), poiché potrebbero eseguire il ripristino degli errori in diversi modi.
Quentin,

15
Questo potrebbe non essere valido, ma guarda il codice di Facebook, utilizza la stessa soluzione nella parte <head> - il che non significa che sia un'ottima soluzione, perché il codice di Facebook è lungi dall'essere un codice valido, MA può significare che funziona sul browser di molti utenti, che può essere un aspetto importante. Ma è vero che non è davvero suggerito. Questo è il loro codice: <noscript> <meta http-equiv = aggiorna contenuto = "0; URL = / about / messaggi /? _ Fb_noscript = 1" /> </noscript>
Sk8erPeter

IE9 (almeno) ha un'impostazione "consentire META REFRESH". Non mi sembra che molti lo disattivino, ma presumibilmente quelli che non amano javascript lo fanno, ma se vuoi il 100%, non è questo.
evento jenson-button-

È valido in HTML5.
Naszta,

1
Questo distrugge il link quando proviamo a condividere su Linkedin, abbiamo trovato il modo difficile ... questa non è una buona idea. Poiché il linkedin segue il meta refresh, ignorando i tag Og, ecc.
SomeDudeSomewhere

44

Se il tuo caso d'uso è che hai un modulo (ad esempio un modulo di accesso) e lo script sul lato server deve sapere se l'utente ha JavaScript abilitato, puoi fare qualcosa del genere:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

Questo cambierà il valore di js_enabled su 1 prima di inviare il modulo. Se lo script sul lato server ottiene uno 0, nessun JS. Se ottiene un 1, JS!


44

Ti suggerirei di fare il contrario scrivendo JavaScript discreto.

Fai funzionare le funzionalità del tuo progetto per gli utenti con JavaScript disabilitato e, una volta terminato, implementa i miglioramenti dell'interfaccia utente JavaScript.

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript


146
La vita è troppo corta. È il 2012 - Abilita JavaScript o torna a casa
Yarin,

25
"La vita è troppo breve. È il 2012 - Abilita JavaScript o torna a casa!" è un piccolo messaggio perfetto da visualizzare in caso di assenza di JS. loggato solo per dirti che @Yarin

5
Ho anche effettuato l'accesso per dire che è FANTASTICO! @Yarin. Sto creando un piccolo sito che non sarà generalmente pubblico (considera come una intranet ma per gli amici che si riuniscono per lavorare su un progetto). Lo sto trasformando in una SPA e non mi preoccupo di fare un fallback. JavaScript discreto quasi raddoppierebbe il carico di lavoro che sto inserendo nel concetto SPA. Con le moderne librerie javascript come Knockout, Jquery, tra gli altri, dobbiamo solo accettare che non tutti i siti possono essere facilmente resi "discreti". Javascript è il futuro del web.
lassombra,

5
@Yarin Costruisco app PHP / JS per una vita che non ho mai messo in fallback ... se non funziona per qualcuno mi contattano e dico loro di smettere di vivere in passato e abilitare JS.
Sam,

2
@ n611x007 - Le cose non etiche si nascondono in tutto il codice, in ogni dispositivo, sia lato server che client. Non è colpa dei codici, è colpa dell'uomo. Trovo ironica una campagna contro JS perché usi ancora un ISP di terze parti per connetterti a Internet, usi ancora un computer con hardware / firmware di terze parti, usi ancora reti cellulari non sicure accessibili da iniezioni di terze parti, possiedi ancora un telefono cellulare che usa un sistema operativo senza patch di terze parti, utilizza ancora una TV a schermo piatto che utilizza un servizio di aggiornamento completamente aperto di terze parti, ecc. ecc. Sei sempre vittima di canali MITM-ish indipendentemente dal fatto che JS sia disattivato nel tuo browser.
Dhaupin,

35

<noscript>non è nemmeno necessario e, per non parlare, non supportato in XHTML .

Esempio di lavoro :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

In questo esempio, se JavaScript è abilitato, viene visualizzato il sito. In caso contrario, viene visualizzato il messaggio "Abilita JavaScript". Il modo migliore per verificare se JavaScript è abilitato, è semplicemente provare e usare JavaScript! Se funziona, è abilitato, in caso contrario, non lo è ...


1
Ah, XHTML. Erano i giorni ... Le cose sono cambiate molto: developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Stephan Weinhold

perché usare jquery ...
Luis Villavicencio il

@StephanWeinhold, JSF utilizza XHTML.
Arash,

34

Utilizzare una classe .no-js sul corpo e creare stili non javascript basati sulla classe genitore .no-js. Se javascript è disabilitato otterrai tutti gli stili non javascript, se c'è il supporto JS la classe .no-js verrà sostituita dandoti tutti gli stili come al solito.

 document.body.className = document.body.className.replace("no-js","js");

trucco usato in HTML5 boilerplate http://html5boilerplate.com/ attraverso modernizr ma puoi usare una riga di javascript per sostituire le classi

I tag noscript vanno bene, ma perché hai cose extra nel tuo HTML quando può essere fatto con CSS


5
Non riesco a credere che ci sia voluto tanto tempo prima che qualcuno menzionasse la .nojslezione! Questo è uno degli approcci più fluidi e fa noscriptvergogna.
Mosè,

15

solo un po 'duro ma (hairbo mi ha dato l'idea)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

funzionerebbe in ogni caso giusto? anche se il tag noscript non è supportato (solo alcuni css richiesti) qualcuno conosce una soluzione non css?


13

Puoi utilizzare un semplice frammento JS per impostare il valore di un campo nascosto. Quando ripubblicato, sai se JS era abilitato o meno.

Oppure puoi provare ad aprire una finestra popup che si chiude rapidamente (ma che potrebbe essere visibile).

Inoltre hai il tag NOSCRIPT che puoi usare per mostrare il testo per i browser con JS disabilitato.


Questa non è una buona risposta La prima soluzione richiede un ricaricamento della pagina e l'invio di un modulo. La seconda soluzione apre un popup (ack!) E lo chiude "rapidamente" - dal lato client? -1
Ben

A volte è necessario sapere sul lato server se un sito ha JS abilitato o meno, quindi non vedo come puoi farlo se non pubblicare qualcosa. Concordo sul fatto che un popup è brutto e non ne sono davvero sicuro, ma dovrebbe essere possibile aprire un popup al di fuori dell'area visibile dello schermo in modo che l'utente non ne sia disturbato. Non è elegante ma funziona e non è possibile ricaricare la pagina.
rslite

Gli spambots pubblicano anche in un campo nascosto.
Janis Veinbergs,

13

Ti consigliamo di dare un'occhiata al tag noscript.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>

12

Il tag noscript funziona bene, ma richiederà ogni richiesta di pagina aggiuntiva per continuare a servire file JS inutili, dato che essenzialmente noscript è un controllo lato client.

È possibile impostare un cookie con JS, ma come ha sottolineato qualcun altro, ciò potrebbe non riuscire. Idealmente, si desidera essere in grado di rilevare il lato client JS e, senza utilizzare i cookie, impostare un lato server di sessione per quell'utente che indica che JS è abilitato.

Una possibilità è quella di aggiungere dinamicamente un'immagine 1x1 utilizzando JavaScript in cui l'attributo src è in realtà uno script lato server. Tutto ciò che fa questo script è salvare nella sessione dell'utente corrente che JS è abilitato ($ _SESSION ['js_enabled']). È quindi possibile restituire un'immagine vuota 1x1 al browser. Lo script non verrà eseguito per gli utenti che hanno disabilitato JS e quindi $ _SESSION ['js_enabled'] non verrà impostato. Quindi, per ulteriori pagine fornite a questo utente, puoi decidere se includere tutti i tuoi file JS esterni, ma ti consigliamo sempre di includere il controllo, poiché alcuni dei tuoi utenti potrebbero utilizzare il componente aggiuntivo NoScript Firefox o avere JS disabilitato temporaneamente per qualche altro motivo.

Probabilmente vorrai includere questo controllo da qualche parte vicino alla fine della tua pagina in modo che la richiesta HTTP aggiuntiva non rallenti il ​​rendering della tua pagina.


12

Aggiungi questo al tag HEAD di ogni pagina.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Quindi hai:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Grazie a Jay.


12

Perché voglio sempre dare qualcosa di utile al browser, spesso uso questo trucco:

Innanzitutto, qualsiasi parte di una pagina che necessita di JavaScript per funzionare correttamente (compresi gli elementi HTML passivi che vengono modificati tramite chiamate getElementById ecc.) È progettata per essere utilizzabile così com'è, supponendo che non sia disponibile javaScript. (progettato come se non fosse lì)

Qualsiasi elemento che richiederebbe JavaScript, inserisco all'interno di un tag qualcosa come:

<span name="jsOnly" style="display: none;"></span>

Quindi all'inizio del mio documento, uso .onloado document.readyall'interno di un ciclo di getElementsByName('jsOnly')per .style.display = "";riaccendere gli elementi dipendenti da JS. In questo modo, i browser non JS non devono mai vedere le porzioni dipendenti dal sito JS del sito, e se lo hanno, appare immediatamente quando è pronto.

Una volta che sei abituato a questo metodo, è abbastanza facile ibridare il tuo codice per gestire entrambe le situazioni, anche se solo ora sto sperimentando il noscripttag e mi aspetto che avrà alcuni vantaggi aggiuntivi.


10

Questo è l'uso dell'id della soluzione "più pulito":

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>

9

Una soluzione comune è il meta tag insieme a noscript per aggiornare la pagina e avvisare il server quando JavaScript è disabilitato, in questo modo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

Nell'esempio sopra quando JavaScript è disabilitato, il browser reindirizzerà alla home page del sito Web in 0 secondi. Inoltre, invierà anche il parametro javascript = false al server.

Uno script lato server come node.js o PHP può quindi analizzare il parametro e scoprire che JavaScript è disabilitato. Può quindi inviare una versione speciale non JavaScript del sito Web al client.


8

Se javascript è disabilitato il tuo codice lato client non verrà eseguito comunque, quindi presumo che tu voglia che quelle informazioni siano disponibili lato server. In tal caso, noscript è meno utile. Invece, avrei un input nascosto e utilizzerei JavaScript per inserire un valore. Dopo la tua prossima richiesta o postback, se il valore è presente, sai che JavaScript è attivato.

Fai attenzione a cose come noscript, in cui la prima richiesta può mostrare javascript disabilitato, ma le richieste future lo attivano.


5

Ad esempio, potresti usare qualcosa come document.location = 'java_page.html' per reindirizzare il browser a una nuova pagina carica di script. Il mancato reindirizzamento implica che JavaScript non è disponibile, nel qual caso è possibile ricorrere alle routine CGI o inserire il codice appropriato tra i tag. (NOTA: NOSCRIPT è disponibile solo in Netscape Navigator 3.0 e versioni successive.)

credit http://www.intranetjournal.com/faqs/jsfaq/how12.html


4

Una tecnica che ho usato in passato è usare JavaScript per scrivere un cookie di sessione che agisce semplicemente come un flag per dire che JavaScript è abilitato. Quindi il codice lato server cerca questo cookie e, se non viene trovato, agisce nel modo appropriato. Naturalmente questa tecnica si basa sull'abilitazione dei cookie!


4

Penso che potresti inserire un tag immagine in un tag noscript e guardare le statistiche quante volte il tuo sito e quanto spesso questa immagine è stata caricata.


4

Le persone hanno già pubblicato esempi che sono buone opzioni per il rilevamento, ma in base al requisito di "avvisare che il sito non è in grado di funzionare correttamente senza che il browser abbia JS abilitato". Fondamentalmente aggiungi un elemento che appare in qualche modo sulla pagina, ad esempio i "pop-up" su Stack Overflow quando guadagni un badge, con un messaggio appropriato, quindi rimuovilo con un po 'di Javascript che viene eseguito non appena la pagina viene caricata ( e intendo il DOM, non l'intera pagina).


3

Rileggerlo in cosa? JavaScript? Sarebbe impossibile. Se lo desideri solo per scopi di registrazione, potresti utilizzare una sorta di schema di tracciamento, in cui ogni pagina ha JavaScript che farà una richiesta per una risorsa speciale (probabilmente molto piccola gifo simile). In questo modo puoi semplicemente fare la differenza tra richieste di pagine uniche e richieste per il tuo file di monitoraggio.


3

Perché non hai semplicemente messo un gestore di eventi onClick () dirottato che si attiverà solo quando JS è abilitato e lo usi per aggiungere un parametro (js = true) all'URL cliccato / selezionato (potresti anche rilevare un elenco a discesa e modifica il valore di aggiungi un campo modulo nascosto). Quindi ora quando il server vede questo parametro (js = true), sa che JS è abilitato e quindi fa la tua logica lato server.
Il lato negativo di questo è che la prima volta che un utente arriva al tuo sito, segnalibro, URL, URL generato dal motore di ricerca, dovrai rilevare che si tratta di un nuovo utente, quindi non cercare l'NVP aggiunto nell'URL, e il server dovrebbe attendere il clic successivo per determinare se l'utente è abilitato / disabilitato JS. Inoltre, un altro aspetto negativo è che l'URL finirà sull'URL del browser e se questo utente quindi lo aggiunge ai segnalibri avrà l'NVP js = true, anche se l'utente non ha JS abilitato, anche se al clic successivo il server lo farebbe sii prudente nel sapere se l'utente ha ancora abilitato JS o meno. Sigh .. questo è divertente ...


3

Per forzare gli utenti ad abilitare gli script Java, ho impostato l'attributo 'href' di ciascun collegamento sullo stesso documento, che avvisa l'utente di abilitare gli script Java o scaricare Firefox (se non sanno come abilitare gli script Java). Ho archiviato l'URL del link effettivo all'attributo "name" dei link e definito un evento onclick globale che legge l'attributo "name" e reindirizza la pagina lì.

Questo funziona bene per la mia base di utenti, anche se un po 'fascista;).


e un po 'fastidioso se l'utente ha JS abilitato e fa clic sul link prima che il tuo javascript progressivo
entri

1
Certo, ma nessun problema ancora segnalato.
Jan Sahin,

3

Non si rileva se l'utente ha javascript disabilitato (lato server o client). Invece, supponi che javascript sia disabilitato e costruisci la tua pagina web con javascript disabilitato. Questo ovvia alla necessità noscript, che dovresti evitare di usare comunque perché non funziona abbastanza bene e non è necessario.

Ad esempio, basta creare il tuo sito per dire <div id="nojs">This website doesn't work without JS</div>

Quindi, il tuo script semplicemente farà document.getElementById('nojs').style.display = 'none';e proseguirà nella sua normale attività JS.


questo è un ottimo approccio senza soluzione di continuità I tag <noscript> sono molto più difficili da mantenere su pagine diverse con questo approccio puoi mantenere lo stile del tuo noscript attraverso il tuo file css.
zadubz,

3

Verifica la presenza di cookie utilizzando una soluzione lato server che ho introdotto qui, quindi controlla la presenza di javascript facendo cadere un cookie utilizzando Jquery.Cookie e quindi controlla la presenza di cookie in questo modo, controlla sia i cookie che javascript


3

In alcuni casi, farlo al contrario potrebbe essere sufficiente. Aggiungi una classe utilizzando JavaScript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

Ciò potrebbe creare problemi di manutenzione su qualsiasi cosa complessa, ma è una soluzione semplice per alcune cose. Invece di provare a rilevare quando non è caricato, basta uno stile in base a quando è caricato.


3

Vorrei aggiungere la mia soluzione per ottenere statistiche affidabili su quanti utenti reali visitano il mio sito con javascript disabilitato sul totale degli utenti. Il controllo viene eseguito una sola volta per sessione con questi vantaggi:

  • Gli utenti che visitano 100 pagine o solo 1 vengono conteggiati 1 ciascuno. Ciò consente di concentrarsi su singoli utenti, non sulle pagine.
  • Non interrompe comunque il flusso, la struttura o la semantica della pagina
  • Potrebbe registrare l'agente utente. Ciò consente di escludere i robot dalle statistiche, come google bot e bing bot che di solito hanno JS disabilitato! Potrebbe anche registrare IP, tempo ecc ...
  • Solo un controllo per sessione (sovraccarico minimo)

Il mio codice usa PHP, mysql e jquery con ajax ma potrebbe essere adattato ad altre lingue:

Crea una tabella nel tuo DB come questa:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Aggiungilo a ogni pagina dopo aver usato session_start () o equivalente (richiesto jquery):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Crea la pagina JSOK.php in questo modo:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");

3

Ho capito un altro approccio usando css e javascript stesso.
Questo è solo per iniziare a armeggiare con classi e ID.

Lo snippet CSS:
1. Creare una regola ID css e denominarla #jsDis.
2. Utilizzare la proprietà "content" per generare un testo dopo l'elemento BODY. (Puoi modellare questo come desideri).
3 Creare una seconda regola ID css e denominarla #jsEn e stilizzarla. (per semplicità, ho dato alla mia regola #jsEn un colore di sfondo diverso.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

Lo snippet JavaScript:
1. Creare una funzione.
2. Prendi l'ID CORPO con getElementById e assegnalo a una variabile.
3. Utilizzando la funzione JS 'setAttribute', modificare il valore dell'attributo ID dell'elemento BODY.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

La parte HTML.
1. Denominare l'attributo dell'elemento BODY con l'ID di #jsDis.
2. Aggiungi l'evento onLoad con il nome della funzione. (JSON ()).

<body id="jsDis" onLoad="jsOn()">

A causa del tag BODY è stato assegnato l'ID di #jsDis:
- Se Javascript è abilitato, cambierà da solo l'attributo del tag BODY.
- Se Javascript è disabilitato, mostrerà il testo della regola 'content:' css.

Puoi giocare con un contenitore #wrapper o con qualsiasi DIV che utilizza JS.

Spero che questo aiuti ad avere l'idea.


2

Aggiungere un aggiornamento a meta all'interno di noscript non è una buona idea.

  1. Perché il tag noscript non è conforme a XHTML

  2. Il valore dell'attributo "Aggiorna" non è standard e non deve essere utilizzato. "Aggiorna" toglie il controllo di una pagina all'utente. L'uso di "Aggiorna" provocherà un errore nelle Linee guida sull'accessibilità del contenuto Web del W3C --- Riferimento http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .


Nessuno ha detto nulla su XHTML. <noscript> è HTML 4.01 perfettamente valido rigoroso.
Tom,

2
noscript è anche perfettamente valido in XHTML 1.0 e XHTML 1.1. Non può contenere meta elementi e dovrebbe essere evitato a favore del miglioramento progressivo, ma fa parte delle lingue.
Quentin,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.