javascript - 如何在 squarespace 上添加 JavaScript 代码注入(inject)以更改 href 属性？

Question

我试图通过插入代码注入(inject)来更改我的 squarespace 网站上的链接。我正在添加以下代码:

<script>
  var element = document.getElementsByClassName('eventitem-backlink')[0];
  element.setAttribute('href', '/archive/2017');
</script>

但是，这不起作用，因为元素未定义。 document.getElementsByClassName 调用返回一个长度为 1 的列表，其中包含我要编辑的元素，但是当我尝试提取它时，它是未定义的。

当我运行以下代码时:

 console.log(document.getElementsByClassName('eventitem-backlink'));
 console.log(document.getElementsByClassName('eventitem-backlink')[0]);

它产生以下内容:

Answer 1

您在此过程中调用该函数的时间过早。尝试:

<script>
  (function() {

    function fn() {
      var element = document.getElementsByClassName('eventitem-backlink')[0];

      if (element) {
        console.log('element found');  
        element.setAttribute('href', '/archive/2017');
      } else {
        console.log('element not found yet');    
        setTimeout(fn, 200);
      }
    }

    fn();
  })();
</script>