为什么内联 JavaScript 无法在具有外部源的脚本标签中工作？

使用 HTML 脚本标签加载脚本

HTML 脚本标签用于包含和执行 JavaScript 代码。默认情况下，此标记采用外部源属性，例如 scr 来加载 JavaScript 文件。但是，尝试在脚本标记中包含内联 JavaScript，如下所示：

<script src="myFile.js">
    alert( "This is a test" );
</script>

静默失败而不抛出错误。

为什么在脚本标记中使用内联 JavaScript 不起作用

出现此行为的原因是脚本元素只能加载单个源，无论是外部源还是内联源。当 src 和内联内容同时存在时，内联内容将被忽略。因此：

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

不会加载指定的脚本。

解决方案：使用多个脚本元素

要加载多个脚本，您需要为每个脚本使用单独的脚本元素:

<script src="script/obj.js"></script>
<script src="script/home/login.js"></script>

或者，您可以创建一个动态加载必要脚本的父脚本：

<script>
var scripts = ["script/obj.js", "script/home/login.js"];
for (var i = 0; i < scripts.length; i++) {
  var script = document.createElement("script");
  script.src = scripts[i];
  document.head.appendChild(script);
}
</script>

附加说明

虽然脚本元素中会忽略内联 JavaScript对于外部源，脚本元素的内容保留在 DOM 中。这促使一些开发人员使用它来存储外部脚本访问的数据。然而，为此目的，使用 data-* 属性通常是更合适、更简洁的方法。

以上是为什么内联 JavaScript 无法在具有外部源的脚本标签中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！