使用 JavaScript 通过 URL 下载 JS 文件

如果你想通过 JavaScript 从 URL 下载 JS 文件，这篇博客将会为你提供一些简单的方法。

使用 XMLHttpRequest

XMLHttpRequest 是一个在浏览器中发送 HTTP 请求的对象。你可以使用它来下载 JS 文件，并将其保存到你的本地计算机。

下面是一个通过 URL 下载 JS 文件并保存的简单示例：

function downloadJSFile(url, filename) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = new Blob([xhr.response], { type: 'text/javascript' });
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  xhr.send();
}

downloadJSFile('https://example.com/script.js', 'script.js');

上述示例中，我们创建了一个 XMLHttpRequest 对象，使用 GET 请求获取 JS 文件的数据。然后将其保存为 Blob 对象，并创建一个下载链接。当链接被点击时，JS 文件将会被下载到客户端的本地计算机上。

使用 Fetch API

除了使用 XMLHttpRequest，你还可以使用 Fetch API 来下载 JS 文件。Fetch API 是基于 Promise 的，更简单易用。

以下是通过 URL 下载 JS 文件并保存的示例：

function downloadJSFile(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
}

downloadJSFile('https://example.com/script.js', 'script.js');

在上述示例中，我们使用 Fetch API 发起了一个 GET 请求，然后将响应数据转换为 Blob 对象。接下来，我们再创建下载链接，并触发点击事件以下载文件。

动态加载 JS 文件

如果你只想在当前页面中动态加载 JS 文件，而不需要将其保存到本地计算机上，可以使用以下方法：

function loadJSFile(url) {
  var script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

loadJSFile('https://example.com/script.js');

通过创建一个 script 元素，并将其 src 属性设置为 JS 文件的 URL，就可以实现动态加载。

结论

本篇博客介绍了如何使用 JavaScript 通过 URL 下载 JS 文件。你可以选择使用 XMLHttpRequest 或 Fetch API 下载并保存 JS 文件到本地计算机，或者通过动态加载的方式直接将 JS 文件引入到页面中。选择适合你需求的方法，利用 JavaScript 功能丰富你的网页。

本文来自极简博客，作者：灵魂导师，转载请注明原文链接：使用 JavaScript 通过 URL 下载 JS 文件