javascript 动态脚本添加的简单方法

当网页文档加载的时候，我们可以通过动态添加JavaScript脚本来给网页添加更多的交互性和动态性。下面将介绍JavaScript动态脚本添加的简单方法。

基本用法

动态添加JavaScript脚本的方法非常简单，只需要使用document.createElement方法创建一个script元素，然后设置其src属性即可。

var script = document.createElement('script');
script.src = 'path/to/script.js'; // 脚本文件路径
document.body.appendChild(script); // 将脚本添加到页面中

上面代码首先创建了一个script元素，然后设置了src属性，即要添加的脚本文件路径，最后通过appendChild方法将此脚本添加到页面的body元素中。

加载完成回调

当我们添加脚本文件到页面中后，并不能确定其是否加载成功。因此我们需要在脚本加载完成后进行一些操作。我们可以在脚本元素的onload和onerror事件中分别处理加载成功和失败的情况。如下所示：

var script = document.createElement('script');
script.src = 'path/to/script.js'; // 脚本文件路径

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

script.onerror = function(err) {
  console.error('script loading failed: ' + err);
};

document.body.appendChild(script); // 将脚本添加到页面中

上面代码的onload事件中使用console.log方法输出加载完成提示信息，onerror事件中则使用console.error方法输出加载失败的提示信息。

示例

下面我们举两个实际的例子来说明如何使用动态添加JavaScript脚本的方式：

例子一：调用jQuery库

假设我们的网页需要使用jQuery库，但该库并没有在HTML文件中直接引入。我们可以动态添加该库脚本：

var script = document.createElement('script');
script.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js';
document.body.appendChild(script);

该代码将从CDN中加载jQuery库，并添加到页面中，从而可以在页面中使用jQuery相关的方法。

例子二：加载自定义脚本

假如我们想要在页面中添加一个自定义脚本，例如实现一个图片轮播功能，我们可以这样做：

var script = document.createElement('script');
script.src = 'path/to/custom.js'; // 自定义脚本文件路径

script.onload = function() {
  console.log('custom script loaded');
  // 在这里可以调用自定义脚本的方法
};

document.body.appendChild(script);

该代码将自定义脚本添加到页面中，并在其加载成功后输出提示信息。在onload事件中，我们可以调用自定义脚本中的方法来实现图片轮播功能等自定义交互效果。

总之，动态添加JavaScript脚本非常方便灵活，能够让我们更好地控制JavaScript代码的加载和执行，从而提高网页的性能和交互效果。