Альтернатива тегу noscript, который работает с аддоном Nofo Firefox

Question

Я делаю сайт, который использует небольшое количество javascript javascript для несущественных или просто эстетических функций. Мне известно, что есть процент пользователей, которые предпочитают перемещаться с отключенным JavaScript, поэтому в принципе я попытался использовать таблицу стилей CSS в теге noscript в заголовке страницы, чтобы там, где JavaScript не был доступен, некоторые элементы страница будет скрыта.

Однако, хотя этот подход работает, когда JavaScript отключен в браузере, он не работает для пользователей, которые блокируют JavaScript с определенными расширениями браузера (я тестировал NoScript для Firefox, конечно, есть и другие). Какой будет альтернативный метод для достижения того, что я хотел с помощью тега noscript в этом сценарии?

Answer 1

NoScript работает, удаляя теги сценариев из документа и, таким образом, предотвращая загрузку файлов js, но он не запрещает выполнение сценариев, поэтому тег noscript не работает.

Чтобы удалить определенные элементы страницы, когда javascript недоступен, независимо от причины, лучший способ - скрыть эти элементы по умолчанию и открыть их с помощью javascript после загрузки страницы. Первым шагом будет создание класса CSS, подобного приведенному ниже, в вашей таблице стилей и применение его ко всему, что вы не хотите видеть, если не могут быть выполнены сценарии JS:

.hideOnNoScript {
    display: none !important;
}

Вторым шагом будет удаление этого CSS-класса с использованием JavaScript при загрузке страницы:

//Execute after page is ready
function ready(callback){
  // in case the document is already rendered
  if (document.readyState!='loading') callback();
  // modern browsers
  else if (document.addEventListener)
      document.addEventListener('DOMContentLoaded', callback);
  // IE <= 8
  else document.attachEvent('onreadystatechange', function(){
      if (document.readyState=='complete') callback();
  });
}

var removeHideOnNoScript = function() {
  var elementstohide = window.top.document.querySelectorAll('.hideOnNoScript ');
  for (let i= 0; i< elementstohide.length; i++) {
    const element = elementstohide[i];
    element.classList.remove('hideOnNoScript');
  }
}

ready(removeHideOnNoScript);

Примечание: мне очень не нравится использовать !important, но мне не удалось заставить это решение работать без него. Я был бы рад изменить это, если кто-то может указать мне на альтернативу.