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

Posted 2023-05-07

【中文标题】与 firefox NoScript 插件一起使用的 noscript 标签的替代品

【英文标题】：Alternative to noscript tag that works with firefox NoScript addon

【发布时间】：2019-03-21 12:24:37

【问题描述】：

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

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

【参考方案1】：

NoScript 的工作原理是从文档中删除 script 标签，从而阻止加载 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，但是没有它我无法使这个解决方案工作。如果有人能指出我的替代方案，我会很高兴改变它。