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

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

Problem, dla mnie, z preferowanym przykładem umieszczenia jakiegoś rodzaju" ta strona nie działa tak dobrze bez Javascript " komunikat jest to, że następnie trzeba upewnić się, że Twoja strona działa dobrze bez Javascript. A kiedy już zaczniesz tę drogę, zaczynasz zdawać sobie sprawę, że strona powinna być kuloodporna z wyłączonym JS, a to cała duża część dodatkowych praca.

Więc tak naprawdę chcesz "przekierowania" do strony z napisem "włącz JS, głuptasie". Ale, oczywiście, nie można niezawodnie zrobić przekierowania meta. Oto propozycja:

<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 wszystkie treści w Twojej witrynie są owinięte div klasy "pagecontainer". CSS wewnątrz znacznika noscript ukryje całą zawartość strony, a zamiast tego wyświetli dowolny komunikat "no JS", który chcesz pokazać. Tak właśnie wygląda Gmail...i jeśli jest wystarczająco dobry dla Google, jest wystarczająco dobry dla mojej małej strony.

noscript bloki są wykonywane, gdy JavaScript jest wyłączony, i są zazwyczaj używane do wyświetlania zawartości alternatywnej do wygenerowanej 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ą link next_page - możesz dodać tutaj parametry, aby wiedzieć na następnej stronie, czy weszli przez link JS/non-js, lub spróbować ustawić plik cookie przez JS, którego brak oznacza, że JS jest wyłączony. Oba te przykłady są dość trywialne i otwarte na manipulację, ale dostajesz pomysł.

Jeśli chcesz mieć czysto statystyczne wyobrażenie o tym, 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 to dobry pomysł dla twojej bazy użytkowników.

Powyższe podejście (śledzenie obrazów) nie będzie działać dobrze dla przeglądarek tekstowych lub tych, które w ogóle nie obsługują js, więc jeśli twoja baza użytkowników zmierza przede wszystkim w kierunku ten obszar, to nie może być najlepsze podejście.

To jest to, co działało dla mnie: to przekierowuje gościa, jeśli javascript jest wyłączony

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

Jeśli twój przypadek użycia polega na tym, że masz formularz (np. formularz logowania) i twój 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 wysłaniem formularza. Jeśli skrypt po stronie serwera dostaje 0, nie JS. Jeśli dostanie 1, JS!

Sugerowałbym, abyś poszedł na odwrót, pisząc dyskretny JavaScript.

Spraw, aby funkcje twojego projektu działały dla użytkowników z wyłączoną obsługą JavaScript, a kiedy skończysz, zaimplementuj swoje ulepszenia interfejsu JavaScript.

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

Użyj klasy. no-js na ciele i utwórz style inne niż javascript na podstawie klasy nadrzędnej. no-js. Jeśli javascript jest wyłączony, otrzymasz wszystkie style non javascript, jeśli istnieje obsługa JS, Klasa. no-js zostanie zastąpiona, dając Ci wszystkie style jak zwykle.

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

Trick użyty w HTML5 boilerplate http://html5boilerplate.com / poprzez modernizr, ale możesz użyć jednej linii javascript, aby zastąpić klasy

Noscript tagi są ok ale po co mieć dodatkowe rzeczy w Twój html, kiedy można to zrobić za pomocą css

<noscript> nie jest nawet konieczne, nie wspominając o nie wspieranym 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, to widzisz stronę. Jeśli nie, zobaczysz komunikat "Proszę włączyć JavaScript". najlepszym sposobem, aby sprawdzić, czy JavaScript jest włączony, jest po prostu spróbować i używać JavaScript! Jeśli to działa, jest włączone, jeśli nie, to nie jest...

Możesz użyć prostego urywku JS, aby ustawić wartość ukrytego pola. Po wysłaniu z powrotem wiesz, czy JS był włączony, czy nie.

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

Masz również znacznik NOSCRIPT, którego możesz użyć do wyświetlania tekstu w przeglądarkach z wyłączonym JS.

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

Można ustawić plik cookie za pomocą JS, ale jak ktoś inny zauważył, może się to nie udać. Najlepiej, jeśli chcesz być w stanie wykryć po stronie klienta JS i bez używania plików cookie, Ustaw stronę serwera sesji dla tego użytkownika, która wskazuje, że JS jest włączona.

Możliwość dynamicznego dodawania obrazu 1x1 za pomocą JavaScript gdzie atrybut src jest w rzeczywistości skryptem po stronie serwera. Skrypt tylko zapisuje bieżącej sesji użytkownika, że JS jest włączony ($_SESSION['js_enabled']). Następnie można wysłać pusty obraz 1x1 z powrotem do przeglądarki. Skrypt nie będzie uruchamiany dla użytkowników, którzy mają wyłączony JS, a zatem $_SESSION ['js_enabled'] nie zostanie ustawiona. Następnie dla dalszych stron serwowanych do tego użytkownika, można zdecydować, czy dołączyć wszystkie swoje zewnętrzne pliki JS, ale zawsze będziesz chciał dołączyć czek, ponieważ niektóre z użytkownicy mogą używać dodatku NoScript Firefox lub tymczasowo wyłączyć JS z innego powodu.

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

Dodaj to do tagu 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>

Będziesz chciał rzucić okiem na znacznik 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>

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

Po pierwsze, każda część strony, która wymaga JavaScript do prawidłowego działania (włączając pasywne elementy HTML, które są modyfikowane przez wywołania getElementById itp.) są zaprojektowane tak, aby były użyteczne jako-is z założeniem, że nie ma javaScript dostępnego. (designed as if it wasn ' t there)

Wszelkie elementy, które wymagają JavaScript, umieszczam wewnątrz znacznika coś like:

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

Następnie na początku mojego dokumentu używam .onload lub document.ready W pętli getElementsByName('jsOnly'), aby ustawić .style.display = ""; Włączanie elementów zależnych od JS z powrotem. W ten sposób przeglądarki inne niż JS nigdy nie muszą widzieć zależnych od JS części witryny, a jeśli ją mają, pojawia się natychmiast, gdy jest gotowa.

Kiedy już przyzwyczaisz się do tej metody, dość łatwo jest hybrydyzować kod, aby poradzić sobie z obiema sytuacjami, chociaż dopiero teraz eksperymentuję z tagiem noscript i oczekuję tego będzie miał kilka dodatkowych zalet.

Po prostu trochę trudne, ale (hairbo dał 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>

Powszechnym rozwiązaniem jest tag meta w połączeniu z noscript, aby odświeżyć stronę i powiadomić serwer, gdy JavaScript jest wyłączony, jak to:

<!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 do strony głównej witryny w ciągu 0 sekund. Dodatkowo wyśle do serwera parametr javascript=false.

Skrypt po stronie serwera, taki jak node.js lub PHP może następnie przeanalizować parametr i dowiedzieć się, że JavaScript jest niepełnosprawni. Następnie może wysłać klientowi specjalną wersję strony internetowej bez obsługi 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 chcesz, aby informacje były dostępne po stronie serwera. W takim przypadku noscript jest mniej pomocny. Zamiast tego miałbym ukryte wejście i używałbym javascript, aby wypełnić wartość. Po następnym żądaniu lub postbacku, jeśli wartość jest tam wiesz, że javascript jest włączony.

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

Jest to "najczystsze" użycie ID 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>

Możesz na przykład użyć czegoś takiego jak document.location = " java_page.html ' przekierowanie przeglądarki na nową, załadowaną skryptami stronę. Brak przekierowania oznacza, że JavaScript jest niedostępny, w takim przypadku możesz albo użyć CGI RO utines 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

Technika, której używałem w przeszłości, to użycie JavaScript do napisania pliku cookie sesji, który po prostu działa jak flaga, aby powiedzieć, że JavaScript jest włączony. Następnie kod po stronie serwera szuka tego pliku cookie i jeśli nie zostanie znaleziony, podejmuje odpowiednie działania. Oczywiście ta technika polega na włączaniu plików cookie!

Myślę, że możesz wstawić tag obrazu do tagu noscript i spojrzeć na statystyki, ile razy Twoja strona 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 "daj ostrzeżenie, że witryna nie jest w stanie działać poprawnie bez włączonej przeglądarki JS". Zasadniczo dodajesz element, który pojawia się na stronie, na przykład "wyskakujące okienka" na przepełnieniu stosu, gdy zdobywasz odznakę, z odpowiednim komunikatem, a następnie usuwasz go za pomocą Javascript, który działa natychmiast po załadowaniu strony (I mam na myśli DOM, a nie całą stronę).

Wykryć 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 poprosi o specjalny zasób (prawdopodobnie bardzo mały gif lub podobny). W ten sposób możesz po prostu wziąć różnicę między unikalnymi żądaniami stron a żądaniami dotyczącymi pliku śledzenia.

Dlaczego po prostu nie umieścisz przechwyconego programu obsługi zdarzeń onClick (), który uruchomi się tylko wtedy, gdy JS jest włączony, i użyj go, aby dodać parametr (js = true) do klikniętego/wybranego adresu URL (możesz również wykryć rozwijaną listę I zmienić wartość - dodaj ukryte pole formularza). Więc teraz, gdy serwer widzi ten parametr (js=true) wie, że JS jest włączony, a następnie zrób swoją fantazyjną logikę po stronie serwera.
Dół do tego jest to, że po raz pierwszy użytkownik przychodzi do witryny, zakładki, URL, wyszukiwania adres URL generowany przez silnik - musisz wykryć, że jest to nowy użytkownik, więc nie szukaj NVP dołączonego do adresu URL, a serwer musiałby czekać na następne kliknięcie, aby określić, że użytkownik jest włączony/wyłączony JS. Ponadto, innym minusem jest to, że adres URL skończy się na URL przeglądarki i jeśli ten użytkownik następnie zakładki ten adres URL będzie miał js = true NVP, nawet jeśli użytkownik nie ma js włączone, choć na następnym kliknięciu serwer byłby mądry, aby wiedzieć, czy użytkownik nadal miał JS włączone czy nie. Westchnienie.. ale zabawa...

Aby zmusić użytkowników do włączenia JavaScripts, ustawiam atrybut 'href' dla każdego linku do tego samego dokumentu, który powiadamia użytkownika o włączeniu JavaScripts lub ściągnięciu Firefoksa (jeśli nie wie jak włączyć JavaScripts). Zapisałem rzeczywisty adres URL linku do atrybutu "name" linków i zdefiniowałem globalne Zdarzenie onclick, które odczytuje atrybut "name" i przekierowuje tam stronę.

To działa 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. To eliminuje potrzebę noscript, której i tak powinieneś unikać, ponieważ nie działa to całkiem dobrze i jest niepotrzebne.

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

Wtedy twój skrypt po prostu zrobi document.getElementById('nojs').style.display = 'none'; i zajmie się swoim normalnym biznesem JS.

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

W niektórych przypadkach, robienie tego od tyłu może być wystarczające. Dodaj klasę używając 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ą na wszystkich złożonych, ale jest to prosta poprawka dla niektórych rzeczy. Zamiast próbować wykryć, kiedy nie jest załadowany, po prostu styl zgodnie z tym, kiedy jest załadowany.

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

Fragment CSS:
1. Utwórz regułę css ID i nazwij ją #jsDis.
2. Użyj właściwości "content", aby wygenerować tekst po elemencie BODY. (Możesz to styl jak chcesz).
3 Utwórz drugą regułę css ID i nazwij ją #jsEn i stylizuj ją. (dla uproszczenia dałem mojej zasadzie #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>

The JavaScript snippet:
1. Utwórz funkcję.
2. Pobierz identyfikator BODY ID za pomocą getElementById i przypisz go do zmiennej.
3. Używając 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. Nazwa atrybutu BODY element o ID #jsDis.
2. Dodaj zdarzenie onLoad z nazwą funkcji. (jsOn ()).

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

Ponieważ tag BODY otrzymał ID #jsDis:
- Jeśli Javascript jest enable, to sam zmieni atrybut tagu BODY.
- Jeśli Javascript jest wyłączony, wyświetli tekst reguły css 'content:'.

Możesz bawić się kontenerem # wrapper lub dowolnym DIV używającym JS.

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

Dodawanie odświeżania w Meta wewnątrz noscript nie jest dobrym pomysłem.

1. Ponieważ znacznik noscript nie jest zgodny z XHTML

2. Wartość atrybutu "Refresh" jest niestandardowa i nie powinna być używana. "Odśwież" przejmuje kontrolę nad stroną od użytkownika. Użycie opcji "Refresh" spowoduje błąd w wytycznych W3C dotyczących dostępności treści internetowych --- Reference http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.

Dla tych, którzy chcą tylko śledzić, czy js był włączony, co powiesz na użycie procedury ajax do przechowywania stanu? Na przykład rejestruję wszystkich odwiedzających / wizyt w zestawie tabel. Pole JSenabled może być ustawione na wartość domyślną FALSE, a funkcja ajax ustawi ją na wartość TRUE, jeśli JS jest włączona.