动态加载script文件的两种方法

当我们需要在网站上动态加载 JavaScript 文件时，有两种常用方法可以选择。

方法一：使用 JavaScript 创建 script 标签

首先，可以使用 JavaScript 动态创建 script 标签。步骤如下：

1. 创建 script 标签。可以使用 document.createElement() 方法创建一个 script 标签。

var script = document.createElement('script');

1. 设置 script 的 src 属性。需要将要执行的 JavaScript 文件的 URL 赋值给 script 的 src 属性。

script.src = 'path/to/your/javascript/file.js';

1. 将 script 标签添加到页面。可以将创建好的 script 标签添加到 head 或者 body 中，以确保文件被正确加载。

document.head.appendChild(script);

示例代码如下：

<button id="btn">动态加载 JS 文件</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
  var script = document.createElement('script');
  script.src = 'path/to/your/javascript/file.js'; // 替换为要执行的 JavaScript 文件的 URL
  document.head.appendChild(script);
});
</script>

方法二：使用 AJAX 请求 JS 文件并 eval 运行

还可以使用 AJAX 请求文件，并通过 eval() 函数运行 JavaScript 文件。步骤如下：

1. 发送 AJAX 请求。可以使用 XMLHttpRequest 或者 jQuery 的 $.ajax() 方法发送 AJAX 请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/javascript/file.js', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    // 执行 JavaScript 代码
  }
};
xhr.send();

1. 在 onload 回调函数中执行 JavaScript 代码。需要使用 eval() 函数执行返回的 JavaScript 代码。

eval(xhr.responseText);

示例代码如下：

<button id="btn">动态加载 JS 文件</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'path/to/your/javascript/file.js', true); // 替换为要执行的 JavaScript 文件的 URL
  xhr.onload = function() {
    if (xhr.status === 200) {
      eval(xhr.responseText);
    }
  };
  xhr.send();
});
</script>

以上两种方法都能实现动态加载 JavaScript 文件的功能，选择方法主要根据实际需求和个人习惯来定。需要注意，动态加载 JavaScript 文件可能会导致同源策略的问题，需要注意浏览器的安全限制。