Показ HTML-кода только при включённом JavaScript

Быстрый ответ

Если необходимо обработать случаи, когда JavaScript включен, можно добавить содержимое динамически следующим образом:

document.addEventListener('DOMContentLoaded', (event) => {
  document.body.innerHTML += '<strong>Javascript активирован!</strong>';
});

Данный код запустится сразу после завершения загрузки ДОМ, добавляя информацию о том, что JavaScript функционирует. Этот метод является крайне эффективным и быстрым для демонстрации результатов работы скрипта.

Уделите внимание совместимости и функциональности

Реализация условного отображения контента

Для управления видимостью элементов при активированном JavaScript можно использовать CSS:

.jsOff {
  display: none;
}

Класс .jsOff можно присвоить любому нужному элементу, и удалить его при включенном JavaScript:

document.documentElement.classList.remove('jsOff');

Комбинирование <noscript> и <style>

Сочетание тегов <style> и <noscript> позволяет предоставить альтернативное оформление:

<noscript>
  <style>
    .jsOnly {
      display: none;
    }
  </style>
</noscript>

Элементы, отмеченные классом .jsOnly, будут скрыты при отключенном JavaScript и отображены при его активации, иначе говоря, будут вести себя аналогично 'yes-script'.

Динамический контент: загрузка при необходимости

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

window.onload = function() {
  document.querySelector('.jsOnly-content-placeholder').innerHTML = '<div>Интерактивный контент загружен</div>';
};

Визуализация

Можно рассмотреть схему работы JavaScript, используя образ светофора 🚦:

Таким образом, <script> дополняет <noscript>, как зелёный дополняет красный на светофоре.🚦

Приоритет доступности и структурированности

Важно предусмотреть наличие <noscript> для случаев, когда JavaScript недоступен. Чёткое структурирование HTML поможет в организации контента.

Улучшение производительности и пользовательского опыта

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

Избегайте устаревших методов

Метод document.write() считается устаревшим, поэтому предпочтительнее использовать такие методы, как createElement и appendChild для создания надёжной структуры и обеспечения лучшей расширяемости.

Полезные материалы

1. <noscript>: Элемент Noscript — HTML: HyperText Markup Language | MDN — Документация MDN по <noscript>.
2. <h1>–<h6>: Элементы секционных заголовков — HTML: HyperText Markup Language | MDN — Информация о структуре содержимого в HTML.
3. Тег noscript в HTML — W3Schools — Учебник и примеры использования <noscript>.
4. HTML Standard — Элемент script — Официальная спецификация HTML, описывающая <script>.
5. Основы работы со скриптами при загрузке | Статьи | web.dev — Техники и лучшие практики загрузки скриптов.
6. html — Как определить, отключён ли JavaScript? — Stack Overflow — Обсуждение методов определения отключённого JavaScript.