Как определить, отключен ли JavaScript? - PullRequest
638 голосов
/ 23 сентября 2008

Сегодня утром было сообщение о том, сколько людей отключили JavaScript. Затем я начал задаваться вопросом, какие методы можно использовать, чтобы определить, отключил ли он этого пользователя.

Кто-нибудь знает какие-то короткие / простые способы определения, отключен ли JavaScript? Я намерен предупредить, что сайт не может нормально работать, если в браузере не включен JS.

В конце концов, я бы хотел перенаправить их на контент, способный работать в отсутствие JS, но для начала мне нужно это обнаружение как заполнитель.

Ответы [ 36 ]

4 голосов
/ 24 сентября 2008

Люди уже опубликовали примеры, которые являются хорошими вариантами для обнаружения, но основаны на вашем требовании «предупредить, что сайт не может работать должным образом, если в браузере не включен JS». Вы в основном добавляете элемент, который каким-то образом появляется на странице, например, всплывающие окна в переполнении стека, когда вы получаете значок, с соответствующим сообщением, а затем удаляете его с помощью некоторого Javascript, который запускается сразу после загрузки страницы ( и я имею в виду DOM, а не всю страницу).

3 голосов
/ 12 сентября 2013

Я нашел другой подход с использованием самого CSS и JavaScript.
Это только для начала возиться с классами и идентификаторами.

Фрагмент CSS:
1. Создайте правило css ID и назовите его # jsDis.
2. Используйте свойство content для генерации текста после элемента BODY. (Вы можете стилизовать это как хотите).
3 Создайте второе правило ID CSS, назовите его #jsEn и стилизуйте его. (для простоты я присвоил правилу #jsEn другой цвет фона.

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

Фрагмент JavaScript:
1. Создайте функцию.
2. Получите идентификатор тела с помощью getElementById и назначьте его переменной.
3. Используя функцию JS 'setAttribute', измените значение атрибута ID элемента BODY.

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

Часть HTML.
1. Назовите атрибут элемента BODY с идентификатором # jsDis.
2. Добавьте событие onLoad с именем функции. (JSon ()).

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

Из-за тега BODY был присвоен идентификатор #jsDis:
- Если Javascript включен, он сам изменит атрибут тега BODY.
- Если Javascript отключен, будет показан текст правила css 'content:'.

Вы можете поиграть с контейнером #wrapper или с любым DIV, использующим JS.

Надеюсь, что это поможет понять.

3 голосов
/ 13 января 2013

В некоторых случаях достаточно сделать это задом наперед. Добавьте класс, используя JavaScript:

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

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

Это может создать проблемы с обслуживанием для чего-нибудь сложного, но это просто исправить для некоторых вещей. Вместо того, чтобы пытаться определить, когда он не загружен, просто стиль в зависимости от того, когда он загружен.

3 голосов
/ 09 февраля 2012

Проверка наличия файлов cookie с использованием чисто серверного решения, которое я ввел здесь , затем проверка наличия javascript путем удаления файла cookie с помощью Jquery.Cookie, а затем проверка наличия файлов cookie таким образом: проверка как файлов cookie, так и JavaScript

3 голосов
/ 31 августа 2011

Вы не определяете, отключен ли у пользователя JavaScript (на стороне сервера или на клиенте). Вместо этого вы предполагаете, что javascript отключен, и создаете свою веб-страницу с отключенным javascript. Это устраняет необходимость в noscript, который вы должны избегать в любом случае, потому что он работает не совсем правильно и не нужен.

Например, просто создайте свой сайт, чтобы сказать <div id="nojs">This website doesn't work without JS</div>

Тогда ваш скрипт просто сделает document.getElementById('nojs').style.display = 'none'; и продолжит свою обычную работу с JS.

3 голосов
/ 14 августа 2009

Почему бы вам просто не добавить обработчик события onClick (), который будет захвачен, который будет срабатывать только при включенном JS, и использовать его для добавления параметра (js = true) в выбранный URL-адрес, по которому щелкнули / вы также можете обнаружить раскрывающийся список и изменить значение - добавить скрытое поле формы). Так что теперь, когда сервер видит этот параметр (js = true), он знает, что JS включен, а затем выполняет свою причудливую логику на стороне сервера.
Обратной стороной этого является то, что в первый раз, когда пользователи заходят на ваш сайт, закладку, URL, URL, созданный поисковой системой, вам нужно будет определить, что это новый пользователь, поэтому не ищите NVP, добавленный в URL, и сервер должен будет ждать следующего щелчка, чтобы определить, включен ли пользователь JS. Кроме того, еще одним недостатком является то, что URL будет в конечном итоге на URL браузера, и если этот пользователь затем добавит в закладки этот URL, он будет иметь js = true NVP, даже если у пользователя не включена JS, хотя при следующем щелчке сервер будет желательно знать, был ли у пользователя включен JS или нет. Вздох .. это весело ...

3 голосов
/ 23 сентября 2008

Обнаружить это в чем? JavaScript? Это было бы невозможно. Если вы просто хотите это для целей ведения журнала, вы можете использовать какую-то схему отслеживания, где на каждой странице есть JavaScript, который будет запрашивать специальный ресурс (вероятно, очень маленький gif или аналогичный). Таким образом, вы можете просто учитывать разницу между уникальными запросами страниц и запросами вашего файла отслеживания.

3 голосов
/ 26 июля 2010

Чтобы заставить пользователей включать JavaScripts, я устанавливаю атрибут 'href' каждой ссылки на один и тот же документ, который уведомляет пользователя о включении JavaScripts или загрузке Firefox (если они не знают, как включить JavaScripts). Я сохранил фактический URL-адрес ссылки на атрибут «name» ссылок и определил глобальное событие onclick, которое считывает атрибут «name» и перенаправляет страницу туда.

Это хорошо работает для моей пользовательской базы, хотя и немного фашистской;).

2 голосов
/ 23 августа 2013

Я хотел бы добавить свое решение, чтобы получить достоверную статистику о том, сколько реальных пользователей посещают мой сайт с отключенным JavaScript для всех пользователей. Проверка проводится один раз за сеанс с этими преимуществами:

  • Пользователи, посещающие 100 страниц или только 1, считаются по 1 на каждого. Это позволяет сосредоточиться на отдельных пользователях, а не на страницах.
  • В любом случае не нарушает поток, структуру или семантику страницы
  • Может войти пользовательский агент. Это позволяет исключить ботов из статистики, таких как бот Google и бот Bing, которые обычно отключают JS! Может также войти IP, время и т. Д ...
  • Всего одна проверка на сеанс (минимальная перегрузка)

Мой код использует PHP, mysql и jquery с ajax, но может быть адаптирован для других языков:

Создайте таблицу в своей БД, как эта:

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;

Добавьте это на каждую страницу после использования session_start () или эквивалентного (требуется 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>
        <?
    }
?>

Создайте страницу JSOK.php следующим образом:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");
2 голосов
/ 03 апреля 2009

Добавление обновления в meta внутри noscript не очень хорошая идея.

  1. Поскольку тег noscript не совместим с XHTML

  2. Значение атрибута «Обновить» является нестандартным и не должно использоваться. «Обновить» забирает контроль над страницей у пользователя. Использование «Обновить» приведет к сбою в Рекомендациях по доступности веб-контента W3C --- Ссылка http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.

...