为什么window.onload只能在第一个数组值上按预期工作，而我必须为其他数组值重新加载页面？

Question

我需要根据页面名称是否包含在数组中来隐藏一些内容，但只能让它在数组中的第一项上正常工作。

我一直在使用下面的代码，并取得了一定程度的成功。

window.onload = function () {
  var url = window.location.href;
  var string_contains = ['careers', 'accessibility', 'privacy', 'cookie-policy', 'legal', 'terms-of-business', 'sitemap',  'search'];

  for(var i =0;i < string_contains.length; i++){
    if(url.indexOf(string_contains[i]) != -1) {
      var x = document.getElementsByClassName("embeddedServiceHelpButton");
      for(var a = 0;a<x.length;a++) {
        x[a].style.display = 'none';
      }
    }
  }
  console.log(a);
}

我希望我的embeddedServiceHelpButton类内容对数组中指定的所有页面都是隐藏的。

但是，它每次只对数组中的第一项有效，但对于数组中的后续项则不起作用，除非我再次重新加载页面，这并不理想。

任何和所有的帮助都非常感谢。

Answer 1

很难确切了解发生了什么，但使用基于CSS的解决方案可能会更好。您需要对发布的代码进行修改，并添加一个带有CSS规则的<style>元素：

window.onload = function () {
  var url = window.location.href;
  var string_contains = ['careers', 'accessibility', 'privacy', 'cookie-policy', 'legal', 'terms-of-business', 'sitemap',  'search'];

  for(var i =0;i < string_contains.length; i++){
    if(url.indexOf(string_contains[i]) != -1) {
      document.body.classList.add("hide-service-buttons");
      break;
    }
  }
  console.log(a);
}

CSS规则：

<style>
  body.hide-service-buttons .embeddedServiceHelpButton {
    display: none;
  }
</style>

这样，即使在页面加载很长时间后才添加按钮，也不会显示按钮。(可能存在冲突的CSS规则，但这种方法最终应该是成功的。)