javascript scratchblocks 方形空间

Question

我想在我的 Squarespace 网站上使用 Scratchblocks（一种从文本列表中渲染可视化 Scratch 代码块的工具，on GitHub）。我遇到的问题是，在第一次加载时永远不会呈现暂存块 - 但只会在刷新后呈现。

这在 header 中（在特定博客的 header 中设置）：

<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>

然后我想我需要在页面末尾调用这个函数 - 我已经把它放在页脚中了：

scratchblocks.renderMatching('pre.blocks');

注意：当我查看源代码时，我在页面末尾看到了两次 JavaScript。不确定那里发生了什么。

这是我网站上的一个示例，它仅在刷新后才呈现暂存块。 [更新 - 按照下面提供的修复，这现在第一次呈现，据我所知每次都呈现。] [http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2

这是其他人使用它并且它正常工作的例子。我已经检查了来源，但我无法弄清楚他们是怎么做到的。 https://codeclubprojects.org/en-GB/scratch/memory/

我还尝试了 Whosebug 上其他地方列出的所有不同方法，让 javascript 仅在 HTML 完成后加载。我无法让它们中的任何一个工作 - 但我认为问题与 Squarespace 有关，我只是不具备解决问题​​的知识。

如有任何帮助，我们将不胜感激。

Answer 1

在 Squarespace 中，当您的自定义 Javascript 仅在页面刷新后有效时，它很可能与 Squarespace's AJAX loading:

有关

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

您可以为您的模板禁用 AJAX。或者，查看此处概述的其他方法： 包括：

window.addEventListener("mercury:load", function(){
   // do stuff
});

此外，我通常建议将自定义代码放在 "Footer" 代码注入区域，除非您有特殊原因不这样做。