Question

我正在制作一个网站，该网站使用少量javascript javascript来实现非必要功能或仅用于美学功能。我知道有一定比例的用户希望在禁用javascript的情况下进行导航，因此原则上我尝试在页面顶部https://secure.php.net/manual/en/control-structures.for.php标记内使用css样式表，以使javascript不可用，页面的某些元素将被隐藏。

但是，尽管这种方法在浏览器中禁用了javascript时仍然有效，但对于阻止使用某些浏览器扩展名的javascript的用户而言，该方法将失败（我用noscript测试过Firefox，当然还有其他方法）。在这种情况下，使用noscript标签可以实现我想要的替代方法吗？

Answer 1

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

要在没有javascript时删除页面的某些元素，无论原因如何，最好的方法是默认隐藏这些元素，并在加载页面后用javascript显示它们。第一步是在样式表中创建一个与下面的CSS类类似的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，但是如果没有它，我还无法使该解决方案正常工作。如果有人可以指出我要替代的方法，我将很高兴进行更改。

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

1 个答案: