Jak wykryć, czy JavaScript jest wyłączony?

Dziś rano był post z pytaniem, ile osób wyłącza JavaScript. Potem zacząłem się zastanawiać, jakich technik można użyć do ustalenia, czy użytkownik ją wyłączył.

Czy ktoś zna jakieś krótkie / proste sposoby wykrycia, czy JavaScript jest wyłączony? Moim zamiarem jest ostrzeżenie, że strona nie może poprawnie działać bez włączonej przeglądarki JS.

W końcu chciałbym przekierować je do treści, które są w stanie działać przy braku JS, ale potrzebuję tego wykrycia jako elementu zastępczego, aby rozpocząć.

Zakładam, że próbujesz zdecydować, czy dostarczać treści z ulepszoną obsługą JavaScript. Najlepsze implementacje degradują się czysto, dzięki czemu strona nadal działa bez JavaScript. Zakładam również, że masz na myśli wykrywanie po stronie serwera , zamiast używania <noscript>elementu z niewyjaśnionego powodu.

Nie ma dobrego sposobu na wykrycie JavaScript po stronie serwera. Alternatywnie możliwe jest ustawienie pliku cookie za pomocą JavaScript , a następnie testowanie tego pliku cookie za pomocą skryptów po stronie serwera przy kolejnych odsłonach. Nie byłoby to jednak odpowiednie do podjęcia decyzji o treści, która ma zostać dostarczona, ponieważ nie byłby w stanie odróżnić odwiedzających bez plików cookie od nowych użytkowników lub odwiedzających, którzy blokują pliki cookie.

Chciałbym tutaj dodać mój .02. Nie jest w 100% kuloodporny, ale myślę, że jest wystarczająco dobry.

Problem z moim preferowanym przykładem umieszczenia jakiegoś komunikatu „ta strona nie działa tak dobrze bez Javascript” polega na tym, że musisz upewnić się, że witryna działa poprawnie bez Javascript. A kiedy już zaczniesz tę drogę, zaczniesz zdawać sobie sprawę, że witryna powinna być kuloodporna z wyłączonym JS, a to cała spora część dodatkowej pracy.

Tak naprawdę to, czego naprawdę chcesz, to „przekierowanie” na stronę z napisem „włącz JS, głupie”. Ale oczywiście nie można niezawodnie przekierowywać meta. Oto sugestia:

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

... gdzie cała zawartość twojej witryny jest owinięta div klasy „pagecontainer”. CSS wewnątrz tagu noscript ukryje wówczas całą zawartość strony i wyświetli komunikat „brak JS”, ​​który chcesz wyświetlić. To właśnie wydaje się robić Gmail ... a jeśli jest wystarczająco dobry dla Google, jest wystarczająco dobry dla mojej małej witryny.

noscript bloki są wykonywane, gdy JavaScript jest wyłączony, i są zwykle używane do wyświetlania treści alternatywnych do wygenerowanych w JavaScript, np

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

Użytkownicy bez js otrzymają next_pagelink - możesz tutaj dodać parametry, abyś wiedział na następnej stronie, czy otrzymali link JS / non-JS, lub spróbuj ustawić plik cookie za pośrednictwem JS, którego brak sugeruje JS jest niepełnosprawny. Oba te przykłady są dość trywialne i otwarte na manipulacje, ale masz pomysł.

Jeśli chcesz mieć czysto statystyczny obraz tego, ilu użytkowników ma wyłączoną obsługę javascript, możesz zrobić coś takiego:

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

następnie sprawdź dzienniki dostępu, aby zobaczyć, ile razy ten obraz został trafiony. Nieco prymitywne rozwiązanie, ale da ci dobry pomysł w procentach dla twojej bazy użytkowników.

Powyższe podejście (śledzenie obrazu) nie działa dobrze w przeglądarkach tekstowych lub tych, które w ogóle nie obsługują js, więc jeśli twoja baza użytkowników przesuwa się głównie w tym obszarze, może to nie być najlepsze podejście.

To działało dla mnie: przekierowuje użytkownika, jeśli javascript jest wyłączony

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

Jeśli Twoim przypadkiem użycia jest formularz (np. Formularz logowania), a skrypt po stronie serwera musi wiedzieć, czy użytkownik ma włączoną obsługę JavaScript, możesz zrobić coś takiego:

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

Spowoduje to zmianę wartości js_enabled na 1 przed przesłaniem formularza. Jeśli skrypt po stronie serwera ma wartość 0, nie ma JS. Jeśli dostanie 1, JS!

Sugeruję, aby przejść na drugą stronę, pisząc dyskretny JavaScript.

Włącz funkcje projektu dla użytkowników z wyłączoną obsługą JavaScript, a kiedy skończysz, zaimplementuj ulepszenia interfejsu JavaScript.

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

<noscript>nie jest nawet konieczne i nie wspominając o nieobsługiwanym w XHTML .

Przykład roboczy :

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

W tym przykładzie, jeśli JavaScript jest włączony, zobaczysz witrynę. Jeśli nie, pojawi się komunikat „Proszę włączyć JavaScript”. Najlepszym sposobem na sprawdzenie, czy JavaScript jest włączony, jest po prostu próba użycia JavaScript! Jeśli to działa, jest włączone, jeśli nie, to nie jest ...

Użyj klasy .no-js na ciele i utwórz style nie JavaScript w oparciu o klasę nadrzędną .no-js. Jeśli javascript jest wyłączony, otrzymasz wszystkie style inne niż javascript, jeśli jest wsparcie JS, klasa .no-js zostanie zastąpiona dając wszystkie style jak zwykle.

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

sztuczka używana w szablonie HTML5 http://html5boilerplate.com/ poprzez modernizr, ale można użyć jednego wiersza javascript do zastąpienia klas

Tagi noscript są w porządku, ale po co mieć dodatkowe elementy w html, skoro można to zrobić za pomocą css

trochę trudne, ale (Hairbo podsunęło mi pomysł)

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>

w każdym razie działałoby, prawda? nawet jeśli tag noscript nie jest obsługiwany (wymagany jest tylko trochę css) ktoś zna rozwiązanie inne niż css?

Możesz użyć prostego fragmentu kodu JS, aby ustawić wartość ukrytego pola. Po odesłaniu wiesz, czy JS został włączony, czy nie.

Lub możesz spróbować otworzyć wyskakujące okno, które zamykasz szybko (ale może być widoczne).

Masz także tag NOSCRIPT, którego możesz używać do wyświetlania tekstu w przeglądarkach z wyłączonym JS.

Będziesz chciał spojrzeć na 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>

Tag noscript działa dobrze, ale będzie wymagał każdego dodatkowego żądania strony, aby nadal wyświetlać bezużyteczne pliki JS, ponieważ zasadniczo noscript jest po stronie klienta sprawdzaniem.

Możesz ustawić plik cookie w JS, ale jak zauważył ktoś inny, może się to nie powieść. Najlepiej byłoby móc wykryć stronę klienta JS i bez używania plików cookie ustawić po stronie serwera sesji dla tego użytkownika, który wskazuje, że JS jest włączony.

Istnieje możliwość dynamicznego dodania obrazu 1x1 za pomocą JavaScript, gdzie atrybut src jest tak naprawdę skryptem po stronie serwera. Wszystko, co robi ten skrypt, zapisuje w bieżącej sesji użytkownika, że ​​JS jest włączony ($ _SESSION ['js_enabled']). Następnie możesz wysłać pusty obraz 1x1 z powrotem do przeglądarki. Skrypt nie uruchomi się dla użytkowników, którzy mają wyłączoną JS, a zatem $ _SESSION ['js_enabled'] nie zostanie ustawiony. Następnie w przypadku kolejnych stron udostępnianych temu użytkownikowi możesz zdecydować, czy chcesz uwzględnić wszystkie swoje zewnętrzne pliki JS, ale zawsze będziesz chciał uwzględnić to zaznaczenie, ponieważ niektórzy użytkownicy mogą korzystać z dodatku NoScript Firefox lub mieć JS tymczasowo wyłączone z innego powodu.

Prawdopodobnie będziesz chciał dołączyć to sprawdzenie gdzieś blisko końca strony, aby dodatkowe żądanie HTTP nie spowalniało renderowania strony.

Dodaj to do znacznika HEAD każdej strony.

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

Więc masz:

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

Z podziękowaniami dla Jaya.

Ponieważ zawsze chcę dać przeglądarce coś wartego uwagi, często używam tej sztuczki:

Po pierwsze, każda część strony, która wymaga JavaScript do poprawnego działania (w tym pasywne elementy HTML, które są modyfikowane za pomocą wywołań getElementById itp.) Są zaprojektowane tak, aby nadawały się do użytku w stanie takim, w jakim są, przy założeniu, że nie jest dostępny JavaScript. (zaprojektowany tak, jakby go nie było)

Wszelkie elementy wymagające JavaScript, umieszczam wewnątrz tagu coś takiego:

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

Następnie na początku dokumentu używam .onloadlub document.readyw pętli, getElementsByName('jsOnly')aby ponownie .style.display = "";włączyć włączanie elementów zależnych od JS. W ten sposób przeglądarki inne niż JS nie muszą nigdy widzieć części witryny zależnych od JS, a jeśli je mają, pojawia się natychmiast, gdy będzie gotowe.

Kiedy już przyzwyczaisz się do tej metody, dość łatwo jest zhybrydyzować twój kod, aby poradzić sobie w obu sytuacjach, chociaż dopiero teraz eksperymentuję ze noscriptznacznikiem i oczekuję, że będzie on miał dodatkowe zalety.

Jest to „najczystsze” użycie identyfikatora rozwiązania:

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

Typowym rozwiązaniem jest metatag w połączeniu z noscript, aby odświeżyć stronę i powiadomić serwer, gdy JavaScript jest wyłączony, w następujący sposób:

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

W powyższym przykładzie, gdy JavaScript jest wyłączony, przeglądarka przekieruje na stronę główną witryny za 0 sekund. Ponadto wyśle ​​również parametr javascript = false na serwer.

Skrypt po stronie serwera, taki jak node.js lub PHP, może następnie przeanalizować parametr i dowiedzieć się, że JavaScript jest wyłączony. Następnie może wysłać do klienta specjalną wersję strony internetowej w języku innym niż JavaScript.

Jeśli javascript jest wyłączony, twój kod po stronie klienta i tak nie będzie działał, więc zakładam, że masz na myśli, że chcesz, aby te informacje były dostępne po stronie serwera. W takim przypadku noscript jest mniej pomocny. Zamiast tego chciałbym mieć ukryte dane wejściowe i użyć javascript do wypełnienia wartości. Jeśli wartość jest tam dostępna, po kolejnym żądaniu lub odesłaniu zwrotnym wiesz, że JavaScript jest włączony.

Uważaj na takie rzeczy jak noscript, gdzie pierwsze żądanie może pokazywać wyłączony javascript, ale przyszłe żądania włączają go.

Możesz na przykład użyć czegoś takiego jak document.location = 'java_page.html', aby przekierować przeglądarkę na nową stronę pełną skryptów. Brak przekierowania oznacza, że ​​JavaScript jest niedostępny, w takim przypadku możesz skorzystać z narzędzi CGI lub wstawić odpowiedni kod między znacznikami. (UWAGA: NOSCRIPT jest dostępny tylko w Netscape Navigator 3.0 i nowszych).

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

Techniką, której użyłem w przeszłości, jest użycie JavaScript do napisania pliku cookie sesji, który po prostu działa jak flaga informująca, że ​​JavaScript jest włączony. Następnie kod po stronie serwera szuka tego pliku cookie, a jeśli nie zostanie znaleziony, podejmuje odpowiednie działania. Oczywiście ta technika polega na włączeniu obsługi plików cookie!

Myślę, że możesz wstawić tag obrazu do tagu noscript i spojrzeć na statystyki, ile razy Twoja witryna i jak często ten obraz był ładowany.

Ludzie już opublikowali przykłady, które są dobrymi opcjami wykrywania, ale w oparciu o wymóg „ostrzeż, że witryna nie może działać poprawnie bez włączonej przeglądarki JS”. Zasadniczo dodajesz element, który pojawia się w jakiś sposób na stronie, na przykład „wyskakujące okienka” w przepełnieniu stosu, gdy zdobywasz znaczek, z odpowiednim komunikatem, a następnie usuwasz go za pomocą Javascript, który uruchamia się, gdy tylko strona zostanie załadowana ( i mam na myśli DOM, a nie całą stronę).

Wykryć to w czym? JavaScript? To byłoby niemożliwe. Jeśli chcesz go tylko do celów logowania, możesz użyć jakiegoś schematu śledzenia, w którym każda strona ma JavaScript, który zażąda specjalnego zasobu (prawdopodobnie bardzo małego giflub podobnego). W ten sposób możesz po prostu odróżnić unikalne żądania strony od żądań pliku śledzenia.

Dlaczego po prostu nie umieścisz przechwyconej procedury obsługi zdarzeń onClick (), która będzie uruchamiana tylko po włączeniu JS, i użyj tego, aby dołączyć parametr (js = true) do klikniętego / wybranego adresu URL (możesz również wykryć listę rozwijaną i zmień wartość dodania ukrytego pola formularza). Więc teraz, gdy serwer zobaczy ten parametr (js = true), wie, że JS jest włączony, a następnie wykonaj swoją fantazyjną logikę po stronie serwera.
Wadą tego jest to, że kiedy użytkownicy po raz pierwszy odwiedzają Twoją witrynę, zakładki, adresy URL, adresy URL generowane przez wyszukiwarki - musisz wykryć, że jest to nowy użytkownik, więc nie szukaj NVP dołączonej do adresu URL, i serwer będzie musiał poczekać do następnego kliknięcia, aby ustalić, czy użytkownik ma włączoną / wyłączoną obsługę JS. Kolejną wadą jest to, że adres URL skończy się na adresie URL przeglądarki, a jeśli ten użytkownik doda ten zakładki do zakładek, będzie miał js = true NVP, nawet jeśli użytkownik nie ma włączonej JS, chociaż przy następnym kliknięciu serwer bądź mądry, aby wiedzieć, czy użytkownik nadal ma włączoną obsługę JS, czy nie. Westchnienie ... to jest fajne ...

Aby zmusić użytkowników do włączenia skryptów JavaScript, ustawiam atrybut „href” każdego linku do tego samego dokumentu, co powiadamia użytkownika o włączeniu skryptów JavaScript lub pobraniu przeglądarki Firefox (jeśli nie wiedzą, jak włączyć JavaScript). Zapisałem rzeczywisty adres URL linku do atrybutu „nazwa” linków i zdefiniowałem globalne zdarzenie onclick, które odczytuje atrybut „nazwa” i przekierowuje tam stronę.

Działa to dobrze dla mojej bazy użytkowników, choć trochę faszystowskie;).

Nie wykrywasz, czy użytkownik ma wyłączoną obsługę javascript (po stronie serwera lub klienta). Zamiast tego zakładasz, że javascript jest wyłączony i budujesz swoją stronę z wyłączonym javascript. Eliminuje to potrzebę noscript, której i tak powinieneś unikać, ponieważ nie działa całkiem dobrze i jest niepotrzebny.

Na przykład po prostu zbuduj swoją witrynę, aby powiedzieć <div id="nojs">This website doesn't work without JS</div>

Następnie twój skrypt po prostu wykona document.getElementById('nojs').style.display = 'none';i zajmie się normalną działalnością JS.

Sprawdź pliki cookie za pomocą czystego rozwiązania po stronie serwera, które przedstawiłem tutaj, a następnie sprawdź javascript, upuszczając plik cookie za pomocą Jquery.Cookie, a następnie sprawdź w ten sposób, czy pliki cookie u Sprawdź zarówno pliki cookie, jak i javascript

W niektórych przypadkach zrobienie tego wstecz może być wystarczające. Dodaj klasę za pomocą javascript:

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

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

Może to powodować problemy z konserwacją w każdym złożonym, ale dla niektórych rzeczy jest to prosta poprawka. Zamiast próbować wykryć, kiedy nie jest załadowany, po prostu określ styl zgodnie z momentem załadowania.

Chciałbym dodać moje rozwiązanie, aby uzyskać wiarygodne statystyki dotyczące liczby rzeczywistych użytkowników odwiedzających moją witrynę przy wyłączonym javascript w stosunku do wszystkich użytkowników. Kontrola jest przeprowadzana tylko raz na sesję z następującymi korzyściami:

• Użytkownicy odwiedzający 100 stron lub tylko 1 liczą po 1. Pozwala to skupić się na pojedynczych użytkownikach, a nie na stronach.
• W każdym razie nie przerywa przepływu, struktury ani semantycznej strony
• Mógł logować agenta użytkownika. Pozwala to na wykluczenie botów ze statystyk, takich jak Google Bot i Bing Bot, które zwykle mają wyłączoną JS! Może również rejestrować adres IP, czas itp.
• Tylko jeden czek na sesję (minimalne przeciążenie)

Mój kod używa PHP, mysql i jquery z ajax, ale można go dostosować do innych języków:

Utwórz tabelę w swojej bazie danych, taką jak ta:

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;

Dodaj to do każdej strony po użyciu session_start () lub równoważnej (wymagana 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>
        <?
    }
?>

Utwórz stronę JSOK.php w następujący sposób:

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

Odkryłem inne podejście, używając samego css i javascript.
To tylko po to, by zacząć majstrować przy klasach i identyfikatorach.

Fragment CSS:
1. Utwórz regułę identyfikatora css i nazwij ją #jsDis.
2. Użyj właściwości „content”, aby wygenerować tekst po elemencie BODY. (Możesz to dowolnie stylizować).
3 Utwórz drugą regułę identyfikatora css, nazwij ją #jsEn i stylizuj. (dla uproszczenia nadałem mojej regule #jsEn inny kolor tła.

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

Fragment kodu JavaScript:
1. Utwórz funkcję.
2. Chwyć identyfikator BODY za pomocą getElementById i przypisz go do zmiennej.
3. Za pomocą funkcji JS „setAttribute” zmień wartość atrybutu ID elementu BODY.

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

Część HTML.
1. Nazwij atrybut elementu BODY o identyfikatorze #jsDis.
2. Dodaj zdarzenie onLoad o nazwie funkcji. (jsOn ()).

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

Ponieważ znacznik BODY otrzymał identyfikator #jsDis:
- Jeśli Javascript jest włączony , sam zmieni atrybut znacznika BODY.
- Jeśli Javascript jest wyłączony, wyświetli się tekst reguły css „content:”.

Możesz bawić się pojemnikiem #wrapper lub dowolnym DIV, który używa JS.

Mam nadzieję, że to pomoże uzyskać pomysł.

Dodanie odświeżenia w meta wewnątrz noscript nie jest dobrym pomysłem.

1. Ponieważ tag noscript nie jest zgodny z XHTML

2. Wartość atrybutu „Odśwież” jest niestandardowa i nie należy jej używać. „Odśwież” odbiera użytkownikowi kontrolę nad stroną. Użycie „Odśwież” spowoduje błąd w Wytycznych dotyczących dostępności treści internetowych W3C --- Dokumentacja http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .