替代使用火狐noscript插件的NoScript标记

Question

我正在制作一个网站，它使用少量的javascript javascript作为非必要的或仅仅是美学的功能。我知道有一定比例的用户倾向于在禁用javascript的情况下导航，因此原则上我尝试在页面头部的noscript标记中使用css样式表，以便当javascript不可用时，页面的某些元素将被隐藏。

但是，虽然这种方法在浏览器中禁用javascript时有效，但是对于使用某些浏览器扩展阻止javascript的用户(我用NoScript Firefox进行了测试，当然还有其他的)。在这个场景中，用noscript标记实现我想要的结果的替代方法是什么？

Answer 1

NoScript的工作方式是从文档中移除脚本标记，从而防止js文件被加载，但它不会禁用脚本的执行，因此noscript标记无法工作。

要在javascript不可用时删除页面中的某些元素，无论原因如何，最好的方法是默认情况下隐藏这些元素，并在加载页面后用javascript显示这些元素。第一步是在样式表中创建如下所示的CSS类，并将其应用于所有您不希望可见的东西，除非可以执行JS脚本：

.hideOnNoScript {
    display: none !important;
}

第二步是删除页面加载上带有javascript的CSS类：

//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，但是没有它，我还没有成功地使这个解决方案工作。如果有人能告诉我另一种选择的话，我很乐意改变它。