使用 HTML 脚本标记在它们具有源代码时进行编码

Using HTML script tags to code while they have a source

本文关键字：源代码 编码 脚本 HTML 使用      更新时间：2023-09-26

我注意到<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>

脚本元素加载单个脚本。

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

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

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

。因此，您需要多个脚本元素。

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

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

每个<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库在网页中的加载方式。

相关文章：