Определение поддержки JavaScript: руководство для разработчиков

Раздел: Веб-совместимость -> Обнаружение возможностей браузера

Проверка наличия JavaScript в браузере: обзор методов

Как наиболее надежно определить, включен ли JavaScript у пользователя?

Основной подход основан на использовании элемента <noscript> в сочетании с добавлением CSS-класса через JavaScript. Этот метод гарантирует, что контент для отключенного JS покажется, а для включенного - скроется или изменится.

Пошаговая инструкция:

  1. В тег <html> добавить класс no-js (по умолчанию).
  2. В самом начале <head> встроить скрипт, который заменяет класс no-js на js.
  3. В CSS определит правила для .js и .no-js.
  4. В <noscript> поместить альтернативный контент или редирект.
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
  <script>
    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>
  <noscript>
    <meta http-equiv="refresh" content="0;url=/nojs.html">
  </noscript>
  <style>
    .js .js-only { display: block; }
    .no-js .no-js-only { display: block; }
    .js-only, .no-js-only { display: none; }
  </style>
</head>
<body>
  <div class="js-only">JavaScript включен.</div>
  <div class="no-js-only">JavaScript отключен.</div>
</body>
</html>

Has js (проверка наличия javascript в браузере)

После загрузки страницы браузер с JS меняет класс no-js на js, и стили отображают нужный блок. Если JS отключен, срабатывает <noscript> с редиректом.

Возможные проблемы и их решение

  • Скрипт не выполняется из-за ошибки синтаксиса. Убедиться, что код написан без опечаток и размещен до загрузки стилей.
  • Задержка выполнения скрипта. Скрипт должен быть синхронным и расположен как можно выше.
  • Блокировщики рекламы. Они могут отключать скрипты, но не влияют на <noscript>.
  • Проблемы с кешированием страницы с редиректом. Использовать 0 секунд в мета-редиректе.

Как проверить поддержку JavaScript с помощью navigator.javaEnabled()?

Метод navigator.javaEnabled() возвращает true, если виртуальная машина Java включена. Он не имеет прямого отношения к JavaScript, но исторически использовался для косвенной проверки. Не рекомендуется для современных проектов.

if (navigator.javaEnabled()) {
  console.log('Java включена (не путать с JavaScript)');
} else {
  console.log('Java отключена');
}

Проблема: метод не отражает состояние JavaScript, а только Java. В большинстве браузеров возвращает false или устарел.

Как определить включенный JavaScript с помощью установки cookie?

Скрипт устанавливает cookie, а серверная сторона проверяет её наличие. Это нужно для гибридных приложений.

<script>
  document.cookie = 'js_enabled=true; path=/; max-age=3600';
</script>
<noscript>
  <meta http-equiv="refresh" content="0;url=?js=disabled">
</noscript>

На сервере (PHP): if (isset($_COOKIE['js_enabled'])) { ... }.

Проблема: cookie могут быть отключены пользователем или заблокированы настройками приватности. Также скрипт должен выполняться до загрузки контента.

Как проверить наличие JavaScript с помощью свойства window?

Проверка существования объекта window или его свойств (например, window.addEventListener) - простой способ, но не всегда надежный, так как эти свойства могут быть переопределены.

if (typeof window !== 'undefined' && window.addEventListener) {
  console.log('JavaScript, скорее всего, включен');
}

Ошибка: в среде без JS переменная window не определена, но проверка typeof window !== 'undefined' вызовет исключение? Нет, typeof безопасен. Однако это лишь косвенная проверка.

Использование библиотеки Modernizr

Modernizr добавляет классы к <html> для каждой проверенной возможности, включая JavaScript. Минимальная сборка с опцией «js» проверяет наличие JS.

<script src="modernizr-custom.js"></script>
<p class="no-js">JS отключен</p>
<p class="js">JS включен</p>
<style>
  .no-js .js { display: none; }
  .js .no-js { display: none; }
</style>

Проблема: Modernizr добавляет нагрузку и должен быть загружен до отрисовки. Для простого определения JS избыточен.

Как проверить поддержку JavaScript через try...catch с исполнением кода?

Можно попытаться выполнить синтаксически корректный код и перехватить ошибку, если JS отключен - скрипт не запустится, и исключения не будет, поэтому используется комбинация с <noscript>.

<script>
  try {
    eval('1+1');
    document.documentElement.className = 'js';
  } catch(e) {
    document.documentElement.className = 'no-js';
  }
</script>
<noscript><style>html { display: none; }</style></noscript>

Ошибка: <noscript> срабатывает только если JS отключен, а try...catch выполняется только если JS включен. Поэтому этот метод избыточен; достаточно просто добавления класса.

Расширенные примеры проверки наличия JavaScript

Пример 1: Проверка с помощью <noscript> и редиректа с задержкой

Этот вариант подходит для перенаправления пользователей без JS на отдельную страницу с информацией или упрощенной версией.

Пример 
<!DOCTYPE html>
<html lang="ru">
<head>
  <noscript>
    <meta http-equiv="refresh" content="3;url=/disabled-js.html">
  </noscript>
  <script>
    // Удаляем мета-редирект, если JS включен
    var meta = document.querySelector('meta[http-equiv="refresh"]');
    if (meta) meta.parentNode.removeChild(meta);
  </script>
</head>
<body>
  <p>Если у Вас включен JavaScript, редирект не произойдет.</p>
</body>
</html>

Результат: при отключенном JS через 3 секунды пользователь попадает на страницу /disabled-js.html. При включенном JS мета-тег удаляется, редирект отменяется.

Пример 2: Добавление класса и использование CSS-анимации для индикации

Можно визуально показать пользователю, что JS активен, с помощью анимированного индикатора.

Пример 
<html class="no-js">
<head>
  <style>
    .load-indicator { width: 100px; height: 10px; background: gray; }
    .js .load-indicator { background: green; animation: pulse 1s infinite; }
    .no-js .load-indicator { background: red; }
    @keyframes pulse { 50% { opacity: 0.5; } }
  </style>
  <script>document.documentElement.className = 'js';</script>
</head>
<body>
  <div class="load-indicator"></div>
  <p>Статус JS: <span class="js-only">Активен</span><span class="no-js-only">Неактивен</span></p>
</body>
</html>

Результат: при JS полоса зеленая с пульсацией, при отключенном - красная статичная.

Пример 3: Серверная проверка через установку cookie с последующим AJAX-запросом

Для одностраничных приложений можно проверить наличие JS на клиенте перед загрузкой основного контента.

Пример 
<script>
  // Устанавливаем cookie
  document.cookie = 'jscheck=1; path=/; max-age=86400';
  // Отправляем запрос на сервер для проверки
  fetch('/api/jscheck')
    .then(response => response.json())
    .then(data => {
      if (data.jsEnabled) {
        console.log('JS подтвержден сервером');
      }
    });
</script>
<noscript>
  <form action="/api/jscheck" method="POST">
    <input type="hidden" name="js_disabled" value="1">
    <button type="submit">Проверить</button>
  </form>
</noscript>

Серверный код (Node.js):

Пример 
app.get('/api/jscheck', (req, res) => {
  const jsEnabled = req.cookies.jscheck === '1';
  res.json({ jsEnabled });
});

Результат: при JS cookie устанавливается, сервер получает её и возвращает { jsEnabled: true }. При отсутствии JS отправляется форма с полем js_disabled.

Пример 4: Самодельная функция hasJS() с использованием нескольких проверок

Комбинированный подход для повышения надежности.

Пример 
function hasJS() {
  // Проверка наличия свойства document.addEventListener
  if (typeof document.addEventListener !== 'function') return false;
  // Проверка работы с DOM
  var test = document.createElement('div');
  test.setAttribute('data-test', '1');
  if (test.getAttribute('data-test') !== '1') return false;
  // Проверка eval
  try { eval('true'); } catch(e) { return false; }
  return true;
}

if (hasJS()) {
  document.documentElement.className = 'js';
  console.log('JavaScript обнаружен');
} else {
  document.documentElement.className = 'no-js';
  console.log('JavaScript не обнаружен');
}

Результат: функция возвращает true только если все три проверки пройдены. Это защищает от частично работающего JS.

Пример 5: Использование Intersection Observer для ленивой проверки

Можно проверить наличие JS, наблюдая за появлением скрытого элемента.

Пример 
<div id="js-check" style="display:none;"></div>
<script>
  if ('IntersectionObserver' in window) {
    var observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) {
        console.log('JS включен и элемент виден');
        observer.disconnect();
      }
    });
    observer.observe(document.getElementById('js-check'));
  } else {
    console.log('IntersectionObserver не поддерживается');
  }
</script>
<noscript>
  <p>JS отключен</p>
</noscript>

Результат: если JS работает, наблюдатель срабатывает на скрытый элемент (он невидим, но в DOM). При отключенном JS срабатывает <noscript>.

Проверка наличия JavaScript в браузере - comments

En
Has js (javascript)