Question

我写了一个WordPress插件，该插件提供了向标头添加脚本的功能。当我尝试添加我们服务的代码段

<script src="url/index.js"></script>
<script>
  var foo = new window.Name("token");
  foo.init();
</script>

首先，我遇到了一些错误。

Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
at r.<anonymous> (index.js:176)
at L (index.js:47)
at Generator._invoke (index.js:47)
at Generator.t.(:8000/anonymous function) [as next] (url/index.js:47:4580)
at r (index.js:174)
at c (index.js:174)
at index.js:174
at new Promise (<anonymous>)
at new r (index.js:36)
at r.<anonymous> (index.js:174)

和

Uncaught TypeError: Cannot read property 'appendChild' of null
at i.value (index.js:178)
at r.value (index.js:180)
at (index):41

。

URL返回由Babel渲染的脚本代码。

当我在脚本之前添加任何标准的html代码，例如<html></html>或<p></p>时，

<p></p>
<script src="url/index.js"></script>
<script>
  var foo = new window.Name("token");
  foo.init();
</script>

它工作清楚。那什么HTML代码呢？我听不懂我通过添加<html></html>而没有损坏的网站来解决此问题。我尝试学习问题。

Answer 1

不知道您的url/index.js文件中的内容很难分辨，但是它可能试图将节点添加到<body>元素或其子元素之前。如果您在<head>部分中调用此脚本，它将不存在。

<p></p>修复的原因是，如果浏览器收到以下内容：

<head>
  <script>
    console.log(document.body);
  </script>
</head>

看到它是无效的HTML，因此将其重新解释为：

<html>
  <head>
    <script>
    console.log(document.body);
    </script>
  </head>
  <body></body>
</html>

-在运行脚本时该主体不存在，因此控制台记录null。

如果浏览器收到：

<p>Paragraph</p>
<head>
  <script>
    console.log(document.body);
  </script>
</head>

...它还是无效的HTML，并被重新解释为

<html>
  <head></head>
  <body>
    <p>Paragraph</p>
    <script>
      console.log(document.body);
    </script>
  </body>
</html>

...并且脚本运行时body元素存在，因此它将body元素记录到控制台。

总结：您需要确保所有HTML都是有效的，并且脚本仅尝试将某些内容附加到已经存在的元素上。

在WordPress中添加到标头时脚本损坏

1 个答案: