在有源代码的情况下使用 HTML 脚本标签进行编码答案

【问题标题】：Using HTML script tags to code while they have a source在有源代码的情况下使用 HTML 脚本标签进行编码
【发布时间】：2021-06-20 07:39:01
【问题描述】：

我注意到<script src="..."></script> 标签不允许您在其中使用 JavaScript，例如：

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

而且这不起作用，也不会在FireBug中抛出错误，为什么会出现这种情况，为什么我们必须添加额外的<script>标签才能让JS在表单本身上使用？

例子

我有一个文件，从我的根目录中找到 @script/addScript.js，其中包含：

function addScript( $src )
{
    var script = document.createElement( 'script' );
    script.type = "text/javascript";
    script.src = $src;
    document.getElementsByTagName( 'head' )[0].appendChild( script );
}

这是为了让我可以快速有效地向 DOM 添加脚本，所以我尝试这样做：

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

但它不起作用，所以我必须这样做：

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

【问题讨论】：

标签： javascript html

【解决方案1】：

脚本元素加载单个脚本。

它可以通过 URL 或内联来执行此操作，但它仍会加载一个脚本；它不能同时使用两种类型的来源。

如果您尝试同时包含两者，则内联脚本将被忽略：

<script src="example.js">
    this_is_ignored();
</script>

...所以你需要多个脚本元素。

<script src="example.js">
</script>
<script>
    this_is_NOT_ignored();
</script>

值得注意的是，脚本元素的内容仍然存在于DOM中，所以有人用它来存储数据，src引用的JS会读取。 data-* 属性（可以说）是一种更简洁的方法。

【讨论】：

所以在我的 addScript.js 示例中，它会将脚本加载到 DOM 中，并且标签中的任何内容都被覆盖，没有任何空间来为要加载的实际脚本腾出空间？
Plus 脚本标签是同步的，因此即使您能够在一个标签中添加和运行，您的文件也不会（？）在您调用其中的函数时准备好.至少我是这么认为的。
文本内容作为普通文本节点添加到 DOM 中，但不被视为脚本，因为该元素已从 URL 获取其脚本。

【解决方案2】：

每个<script> 元素都包含一个段可执行的javascript 代码。如果您使用src 属性加载外部文件，那就是该元素的可执行js 片段，否则就是放置在<script></script> 标记之间的代码。如果您尝试同时执行这两种操作，那么您是在尝试将两段可执行代码与一个脚本元素相关联，这不是脚本元素的行为，因此浏览器的 javascript 引擎会忽略内联代码并执行包含的文件代码。

至于为什么会这样，这很可能是制定此标准的人的设计选择。通过在代码片段和<javascript> 元素之间创建一对一的关系，就可以确定正在运行的代码或其优先级。

因此，在您的情况下，您首先必须加载您的外部文件...

<script src="script/addScript.js"></script>

然后调用它提供的任何函数。

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

作为参考，这通常是所有 javascript 库在网页中的加载方式。

【讨论】：