Come rilevare se JavaScript è disabilitato?

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.

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.

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.

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.

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

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

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!

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

<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 è ...

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

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?

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.

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>

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.

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.

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.

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>

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.

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.

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

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!

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.

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).

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.

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 ...

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;).

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.

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

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.

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()) . "'");

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.

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 .