Drupal → Выносим определение поддержки javascript в head

01.03.2020

Для пользователей с включённым javascript друпал добавляет тегу <html> класс js, что позволяет писать более "доступные" стили. Например если на форме включена автоотправка, то можно не просто скрыть кнопку сабмита для всех, а скрыть только для пользователей с js:

.js .example-form .form-submit {
  display: none;
}

Проблема только в одном — скрипт, добавляющий класс js подключается в подвале и поэтому пока страница загружается пользователь будет видеть кнопку, потому что соответствующего класса у <html> ещё нет.

Решение достаточно простое — добавить небольшой кусок js кода прямо в html.html.twig:

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    <script>document.documentElement.className += ' js';</script> <!-- NEW -->
  </head>
  <body{{ attributes }}>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
Написанное актуально для
Drupal 8+
Похожие записи

Комментарии

Как по мне, лучше в таком случае использовать соответствующий хук:

/**
 * Implements hook_page_attachments().
 */
function example_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#tag' => 'script',
      '#value' => "document.documentElement.classList.add('js')",
    ],
    'example_has_js',
  ];
}

Да. Я как-то забыл, что так можно.

Добавить комментарий