Question

Here是一个测试页面，其中包含一些由Bodymovin After Effects插件生成的.js代码。

但是，当我将其包含在正在开发的Wordpress网站上的</body>标签之前时，相同的代码会产生以下错误。

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at SVGRenderer.configAnimation (globe_2.js:formatted:4724)
    at AnimationItem.configAnimation (globe_2.js:formatted:6533)
    at AnimationItem.setParams (globe_2.js:formatted:6444)
    at Object.n [as loadAnimation] (globe_2.js:formatted:6281)
    at Object.loadAnimation (globe_2.js:formatted:1319)
    at globe_2.js:formatted:17169

编辑：如果我在header.php中的wp_head();之后添加了代码，则会出现相同的错误。

调试代码时，可以看到这是因为动画的wrapper变量未定义。之所以这样，是因为context变量未定义。

查看Stack Overflow中的similar question表示如果未完全加载DOM，则可能会发生这种情况，因此我将所有内容包装在以下代码中，从而附加了window.onLoad事件。 ..

window.addEventListener("load",function(event) { MY CODE },false);

但是仍然会产生相同的错误。

我认为也许存在某种Javascript代码冲突，所以我关闭了Wordpress中的所有插件，没什么区别。

可以在其他网站上运行该代码的其他原因是什么？

编辑：两个站点都在同一台服务器上。另外，我将页面源复制到了另一个HTML页面上，并从其中剥离了所有<script>标签。没什么。

非常感谢您的帮助，我已经开始拔头发了！

Answer 1

js代码看起来非常独立。我不认为依赖在起作用。将调试重点放在以下方面：

您的html中是否包含包装标签<div id="lottie"></div>？
包装标签后是否包含js？

为什么某些Javascript代码可以在小型静态网站上运行但不能在Wordpress中运行的原因是什么？

1 个答案: