将脚本附加到 <head> 行不通，但手动编写它行吗？ Chrome 调试器使它们相同

Question

为什么这不起作用？我知道这个问题不受欢迎，但就我而言，我似乎无法理解为什么将此脚本附加到 head 中无法按照我想要的方式工作。

它附加了脚本，我可以在 chrome 调试器中看到它。但我仍然收到错误

tools.js:26 Uncaught ReferenceError: script_object is not defined

这没有意义，因为如果我 copy/paste outerHTML 直接来自 chrome 调试器（由我的脚本创建并附加到 head 的那个），然后直接粘贴它进入我的 index.htm。然后就可以正常使用了。

代码：

var afterTools = document.getElementById("toolsId").nextSibling;
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src","scripts/thescript.js");

document.head.insertBefore(script, afterTools);


let temp = script_object;  // Object hardcoded in thescript.js
console.log(temp);

我要追加的脚本：

  <script id="toolsId" type="text/javascript" src="scripts/tools.js" defer></script>

归根结底，chrome 的调试器显示手动写入脚本或附加脚本之间没有区别。然而，它无法识别脚本中的对象，除非它是手动编写的。

Answer 1

tools.js:26 Uncaught ReferenceError: script_object is not defined

您在实例化之前引用了一个变量。它必须在引用它之前可用，这可能是由于您正在使用 defer..

defer

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. The defer attribute should only be used on external scripts.

来源：https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/script

因此浏览器仅在您的第一个依赖于它的代码之后执行它，因此此时它不可用。

将脚本附加到 <head> 行不通，但手动编写它行吗？ Chrome 调试器使它们相同

Appending a script to <head> doesn't work, but writing it manually does? Chrome debugger renders them the same

html

javascript

dom

append

head