Как узнать, отключен ли JavaScript?
Проблема:
Этим утром на форуме возник вопрос о том, сколько пользователей отключают JavaScript. После этого я задумался, какие методы можно использовать для определения, отключен ли JavaScript у пользователя.
Есть ли у кого-то информация о простых способах обнаружить, отключён ли JavaScript? Я хочу вывести предупреждение о том, что сайт не может функционировать должным образом без включённого JavaScript в браузере.
В конечном итоге я планирую перенаправить пользователей на контент, который будет работать в отсутствие JavaScript, но мне нужно начальное обнаружение для этой цели.
5 ответ(ов)
Я хотел бы внести свою малую лепту. Это не на 100% защищенное решение, но, на мой взгляд, оно вполне подходит.
Проблема, по моему мнению, с предпочтительным примером, предлагающим сообщение вроде "Этот сайт не работает без JavaScript", заключается в том, что вам нужно удостовериться, что ваш сайт нормально работает и без JavaScript. И как только вы начнете в этом направлении, вы поймете, что сайт должен быть полностью работоспособным даже с отключенным JS, и это уже значительно увеличивает объем работы.
Итак, что вам на самом деле нужно, так это "редирект" на страницу, которая скажет: "включите JS, глупец". Но, конечно, вы не можете надежно использовать мета-редиректы. Поэтому вот мое предложение:
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
У вас отключен JavaScript. Удачи с этим.
</div>
</noscript>
...где весь контент вашего сайта обернут в контейнер div с классом "pagecontainer". CSS внутри тега noscript скроет весь контент страницы, и вместо этого отобразит любое сообщение, которое вы хотите показать пользователю о том, что JavaScript отключен. На самом деле, именно так, по-видимому, работает Gmail... и если это достаточно хорошо для Google, то это подойдет и для моего маленького сайта.
Я бы предложил вам поступить иначе и начать с написания ненавязчивого JavaScript.
Создайте функционал вашего проекта так, чтобы он работал для пользователей с отключенным JavaScript, а после завершения разработки реализуйте улучшения интерфейса с использованием JavaScript.
Вы можете подробнее ознакомиться с этой концепцией здесь: https://ru.wikipedia.org/wiki/Ненавязчивый_JavaScript.
Если ваш случай использования предполагает наличие формы (например, формы входа) и вашему серверному скрипту нужно определить, включен ли у пользователя JavaScript, вы можете сделать что-то вроде этого:
<form onsubmit="this.js_enabled.value=1;return true;">
<input type="hidden" name="js_enabled" value="0">
<input type="submit" value="go">
</form>
Этот код изменит значение переменной js_enabled на 1 перед отправкой формы. Если ваш серверный скрипт получит значение 0, значит, JavaScript не включен. Если же получит 1, значит, JavaScript активен!
<noscript> на самом деле не является необходимым, не говоря уже о том, что не поддерживается в XHTML.
Рабочий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Мой сайт</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">Пожалуйста, включите JavaScript...</div>
<div id="site">Контент, зависящий от JavaScript...</div>
</body>
</html>
В этом примере, если JavaScript включен, вы увидите сайт. Если нет, то вы увидите сообщение "Пожалуйста, включите JavaScript". Лучший способ проверить, включен ли JavaScript, — это просто попытаться его использовать! Если все работает, JavaScript включен, если нет — то выключен...
Используйте класс .no-js на элементе body, чтобы создать стили, не зависящие от JavaScript, на основе классов родителя .no-js. Если JavaScript отключен, вы получите все стили, не зависящие от этого языка. Если же JavaScript поддерживается, класс .no-js будет заменён, и вы получите все стили, как обычно.
Вот пример кода:
document.body.className = document.body.className.replace("no-js", "js");
Этот прием используется в HTML5 Boilerplate (http://html5boilerplate.com/) с помощью Modernizr, но вы можете использовать одну строку JavaScript, чтобы заменить классы.
Теги <noscript> тоже допустимы, но зачем добавлять лишние элементы в HTML, если это можно сделать с помощью CSS? Это более чистый и эффективный подход.
Получить координаты (X,Y) HTML-элемента
Смещение якоря HTML для учета фиксированного заголовка
jQuery: Получить имя тега выбранного элемента
Удаление CSS класса из элемента с помощью JavaScript (без jQuery)
Установить и получить cookie с помощью JavaScript