JS 获取外部脚本到当前页面 - Javascript

在开发过程中，我们有时候需要从外部获取 JavaScript 脚本并引用到当前页面中，以实现特定的功能。本文将介绍如何使用 JavaScript 在网页中获取外部脚本。

方法一：使用 document.createElement() 方法

可以使用 JavaScript 中的 document.createElement() 方法动态地创建一个 script 标签，并将其添加到当前页面中。具体代码如下：

var script = document.createElement('script');
script.src = 'external-script.js'; // 外部脚本 URL
document.body.appendChild(script);

以上代码将在页面 body 标签底部动态地创建一个新的 script 标签，并将其 src 属性设置为指定的 URL，从而获取外部脚本。该方法的缺点是，脚本下载和解析完毕后，页面的执行流程会被打断，因而需要谨慎使用。

方法二：使用 Ajax 请求

我们同样可以使用 Ajax 请求获取外部脚本。与方法一相比，使用 Ajax 请求的好处在于我们可以精确地控制脚本的下载和解析时机，并且可以使用 callback 函数确保脚本加载完毕后立即执行。具体代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'external-script.js');
xhr.onload = function () {
  if (xhr.status === 200) {
    eval(xhr.responseText); // 执行脚本
  }
};
xhr.send();

以上代码将创建一个 XMLHttpRequest 对象，并通过 GET 请求获取指定 URL 的脚本。请求状态为 200 时，使用 eval() 方法执行脚本内容。这种方法可以保证只有在脚本下载完毕并执行之后，页面的执行流程才会继续，因而是更为安全可靠的方式。

总结

以上两种方法是获取外部 JavaScript 脚本的常用方式。我们可以根据场景需求来选择使用哪种方式。无论哪种方式，都需要设法控制脚本的下载和执行时机，以保证网页的运行效率。