Альтернатива тегу noscript, который работает с аддоном Firefox NoScript - PullRequest
Новая
       41

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

0 голосов
/ 17 октября 2018

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

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

1 Ответ

0 голосов
/ 17 октября 2018

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, но мне не удалось заставить это решение работать без него.Я был бы рад изменить это, если кто-то может указать мне на альтернативу.

...