Wie erkennt man, ob JavaScript deaktiviert ist?

Question

Es gab heute Morgen einen Beitrag, in dem gefragt wurde, wie viele Leute JavaScript deaktivieren. Dann fragte ich mich, welche Techniken verwendet werden könnten, um festzustellen, ob der Benutzer es deaktiviert hat.

Weiß jemand von einigen kurzen/einfachen Möglichkeiten, um festzustellen, ob JavaScript deaktiviert ist? Meine Absicht ist es, eine Warnung zu geben, dass die Website ohne aktiviertes JS nicht ordnungsgemäß funktionieren kann.

Letztendlich würde ich sie gerne zu Inhalten umleiten, die auch ohne JS funktionieren, aber ich benötige diese Erkennung als Platzhalter, um anzufangen.

Answer 1

Warum musst du wissen, ob auf der Serverseite JavaScript aktiviert ist? Ist es wichtig, welche Variante vom Browser unterstützt wird? Muss er z.B. das Schlüsselwort let verstehen oder reicht var aus?

Ich empfehle, lesbaren Inhalt zu senden, der keine JavaScript für den Zugriff erfordert, und dann einfach versuchen, die JS-Datei zu laden, um alle JS-Verhaltensweisen hinzuzufügen, die Sie möchten.

Zum Beispiel könnte die Benutzeroberfläche fehlen Login- oder Ändern-Schaltfläche, wenn JS nicht aktiviert ist, und sie könnte einen kleinen Text am Ende enthalten (mit

oder einem Element mit CSS animation, das den Text nach einer kurzen Verzögerung anzeigt, wenn der JS-Code das gesamte Element nicht schnell genug entfernt) mit der Aussage "Um diesen Inhalt zu loginen/ändern, müssen Sie die JavaScript-Unterstützung in Ihrem Browser aktivieren." Wenn Sie dies gut machen, könnte der Leser möglicherweise nicht einmal bemerken, dass etwas fehlt, es sei denn, er oder sie versucht, sich anzumelden oder den Inhalt zu ändern.

Als Optimierung könnten Sie dann mit JavaScript ein Cookie setzen und der Server könnte vermeiden, den nicht-JavaScript-lesbaren Inhalt zu senden, wenn Sie ihn aus irgendeinem Grund asynchron abrufen möchten. Stellen Sie einfach sicher, dass Sie dieses Cookie erst setzen, nachdem der JS-Code mindestens einmal ausgeführt wurde, anstatt es sofort zu setzen, wenn der JS-Code startet, um sicherzustellen, dass der Endbenutzer nicht mit einem leeren Bildschirm endet, wenn (nicht wenn!) der JS-Code aus irgendeinem Grund fehlschlägt.

(Beachten Sie, dass das asynchrone Laden des initialen Seitenzustands diesen Inhalt nicht schneller zum Endbenutzer bringt. Sie könnten jedoch nur einen Teil des Gesamtinhalts ohne JavaScript senden. Dadurch können "above the fold" schneller gerendert werden und dann den Rest der Seite asynchron mit JS-Code laden.)

Als zusätzlichen Bonus können Suchmaschinen Ihre Website auch ohne aktiviertes JavaScript indexieren.

Answer 2

Aktualisierung 2022

Diese Frage hat bereits über 30 Antworten, aber keine davon scheint klar oder präzise zu sein, was getan werden musste.

• Verwendetes Server-Seiten-Framework - ASP.NET Core
• Client-Seite - Vanilla JS

Auf BaseController, dem ersten Einstiegspunkt in der App, der OnActionExecutionAsync heißt, habe ich dieses Stück Logik.

• Im Grunde gehe ich standardmäßig davon aus, dass der Client kein Javascript aktiviert hat und setze diese Flagge.

  Response.Cookies.Append("jsEnabled", "false");

• Nach dem initialen Laden auf dem Client habe ich eine Javascript-Funktion, die diese Flagge auf true aktualisiert.

• Diese Funktion wird nur ausgeführt, wenn die Umgebung javascript hat.

Also ist hier die vollständige Lösung.

Client

Fügen Sie beim ersten Laden dieser Funktion hinzu

function detectIfJavascriptIsEnabled() {
    // Wenn diese Funktion ausgeführt wird, bedeutet das, dass js aktiviert ist
    var jsEnabled = getCookie('jsEnabled');
    if (jsEnabled === 'false') {
        setCookie('jsEnabled', 'true');
        location.reload();
    }
}

Server

private bool ValidateIfEnvironmentHasJavascript() {
  if (HttpContext.Request.Cookies != null && HttpContext.Request.Cookies.Count > 0) {
    Boolean.TryParse(HttpContext.Request.Cookies["jsEnabled"], out
      var hasJavascriptEnabled);
    return hasJavascriptEnabled;
  } else {
    Response.Cookies.Append("jsEnabled", "false",
      new CookieOptions() {
        IsEssential = true, Expires = DateTime.UtcNow.AddHours(24)
      });
  }

  return false;
}

So erhalten Sie das Ergebnis

var environmentHasJavascript = ValidateIfEnvironmentHasJavascript();

Answer 3

Ich musste gestern dasselbe Problem lösen, also füge ich hier einfach meine .001 hinzu. Die Lösung funktioniert zumindest auf der Startseite (index.php) für mich in Ordnung

Ich bevorzuge es, nur eine Datei im Stammverzeichnis zu haben: index.php. Dann verwende ich Ordner, um das gesamte Projekt zu strukturieren (Code, CSS, JS usw.). Der Code für index.php lautet wie folgt:

    Bitte aktivieren Sie Javascript

    $(document).ready(function() {
        location.href = "code/home.php";
    });   

    Diese Webseite benötigt aktiviertes JavaScript, um ordnungsgemäß zu funktionieren. Bitte aktivieren Sie es. Vielen Dank!

Hoffentlich hilft dies jemandem. Beste Grüße.

Answer 4

Ich habe eine weitere aufregende Methode, um festzustellen, ob JS aktiviert ist oder nicht. Befolgen Sie die Schritte, um zu erfahren, ob Js auf der Serverseite aktiviert ist:

server.js:

const {jsinfo} = require('visInfo.js'); 
const {visinfo} = require('visInfo.js'); 
app.get('/', async (req, res) => {
res.render('clientPage.html', async (err, html)=>{
visinfo();
res.send(html)
})    
}); 

app.post('/isJSpost', (req, res) => {
    await jsinfo(req);
    res.json({ success: true })
});  

visInfo.js:

let isJs //mache es zu einer globalen Variablen [notwendig]
async function jsinfo(req){
try{
isJs = req.body.isjs
}catch(err){
console.log( 'visinfo.js:jsinfo()::',err.message)
}
}
async function jsextract(){
json = {}
json['isJs'] = isJs
return json
}
async function destroy(){
isJs = undefined
}

async function visinfo() {
  await new Promise(resolve => setTimeout(resolve, 4000)); // [notwendig]
  jsjson = await jsextract () ;
  console.log(jsjson)
  await destroy();
}
module.exports = { visinfo , jsinfo} ; 

Fügen Sie diesen Code in clientPage.html im Kopfbereich an oberster Stelle ein.

function run () {
    isJs = 1
    xhr = new XMLHttpRequest();
    xhr.open('POST', '/isJSpost');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ 
      isjs: isJs 
    }));
}
run();

Sie können den Code ausprobieren, und wenn JS aktiviert ist, sehen Sie {isJs: 1}, sonst ist es undefiniert. Sie können diesen Code ausprobieren, indem Sie Geräte/Browser/Klienten wechseln oder das JS beliebig oft umschalten. Es wird nicht fehlschlagen.

Answer 5

Klingt nach einer seltsamen Lösung, aber du kannst es versuchen :

var jsenabled = 1;
if(jsenabled == 1)
{
   <?php $jsEnabledVar = 1; ?>
}

var jsenabled = 0;
if(jsenabled == 0)
{

}

Verwende jetzt den Wert von '$jsEnabledVar' auf der ganzen Seite. Du kannst ihn auch nutzen, um einen Block anzuzeigen, der dem Benutzer anzeigt, dass JS deaktiviert ist.

Hoffentlich hilft dir das