在有源代码时使用 HTML 脚本标签进行编码

IT技术 javascript html
2021-02-03 20:31:04

我注意到该<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>
2个回答

脚本元素加载单个脚本。

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

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

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

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

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

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

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

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

其它你可能感兴趣的问题
上一篇由于 getValue 和单元格插入可能导致处理时间过长 下一篇JavaScript 检查 null 与 undefined 以及 == 和 === 之间的区别