使用 JavaScript 创建脚本元素

作者

使用 JavaScript 创建脚本元素

Create a Script element using JavaScript

要在 JavaScript 中创建脚本元素：

  1. 使用document.createElement()方法创建script元素。
  2. 将src元素的属性设置为本地或远程 JavaScript 文件。
  3. 使用 方法将元素添加到页面appendChild()。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const script = document.createElement('script');

// 👇️ local file
// script.setAttribute('src', 'another-file.js');

// 👇️ remote file
script.setAttribute(
  'src',
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
);

script.setAttribute('async', '');

// 👇️ optionally set script to be treated as JS module
// script.setAttribute('type', 'module');

script.onload = function handleScriptLoaded() {
  console.log('script has loaded');

  document.getElementById('box').textContent = 'Script loaded successfully';
};

script.onerror = function handleScriptError() {
  console.log('error loading script');
};

document.head.appendChild(script);

我们使用
document.createElement
方法来创建
脚本元素。

我们传递给该方法的唯一参数是要创建的元素的类型。

该createElement方法返回新创建的元素。

我们使用
setAttribute
方法在元素上设置多个属性。

该setAttribute方法有两个参数：

  1. name– 要设置其值的属性的名称。
  2. value– 分配给属性的值。
如果该属性已存在于元素上，则更新该值。否则，将添加一个具有指定名称和值的新属性。

我们将脚本的src属性设置为远程 JavaScript 文件。但是，您可以将其设置为指向本地文件系统上文件的路径。

我们设置脚本的async属性。当该async属性存在时，脚本将与解析并行获取，并在可用时立即进行评估。

如果您使用
的是JavaScript 模块，则可以选择将脚本的type属性设置为。module

我们在元素上添加了
onload
事件处理程序。

load当脚本加载成功时该事件触发。

您还可以在元素上添加
onerror
事件。该事件在脚本加载失败时触发。

请注意，如果您不需要在脚本加载或加载失败时调用函数，则不必添加这些事件处理程序。

根据您的用例，您可能需要在脚本元素上设置许多其他属性。这是来自
MDN 脚本文档的完整列表。

如果我在浏览器中加载文章中的示例，我可以看到脚本已成功加载到我的页面上。

脚本创建成功

–

发表评论