与 firefox NoScript 插件一起使用的 noscript 标签的替代品

Question

我正在制作一个网站，该网站使用少量 javascript javascript 来实现非必要或仅仅是美学功能。我知道有一定比例的用户更喜欢在禁用 javascript 的情况下导航，因此原则上我尝试在 noscript 标签内使用 css 样式 sheet页面的头部，以便在 javascript 不可用的地方，页面的某些元素将被隐藏。

然而，虽然这种方法在浏览器中禁用 javascript 时有效，但对于使用某些浏览器扩展程序阻止 javascript 的用户来说，它会失败（我用 NoScript for Firefox 进行了测试，肯定还有其他人）。在这种情况下，使用 noscript 标记实现我想要的目标的替代方法是什么？

Answer 1

NoScript 的工作原理是从文档中删除脚本标签，从而防止加载 js 文件，但它不会禁用脚本的执行，因此 noscript 标签不起作用。

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

.hideOnNoScript {
    display: none !important;
}

第二步是在页面加载时删除 CSS class 和 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，但没有它我无法使这个解决方案工作。如果有人能指出我的替代方案，我很乐意更改它。

与 firefox NoScript 插件一起使用的 noscript 标签的替代品

Alternative to noscript tag that works with firefox NoScript addon

html

firefox-addon

noscript