如何动态加载远程JavaScript文件并确保其导出内容在当前作用域可用？

要解决异步加载远程JS后确保能访问其函数/变量的问题，核心是等待脚本加载完成后再执行依赖代码，下面是两种最实用的实现方案：

方法1：用ES模块动态import()（推荐） #

如果你的远程脚本是ES模块（像示例里的remote.js带export），动态import()是现代前端的首选方案——它原生支持异步加载，返回Promise，能直接获取模块导出的内容，还不会污染全局作用域。

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dynamic JavaScript loading example</title>
</head>
<body>
  <h1>Dynamic JavaScript loading example</h1>
  <script>
    async function loadAndUseScript(url) {
      try {
        // 等待模块加载完成
        const remoteModule = await import(url);
        // 直接调用模块导出的foo函数
        remoteModule.foo();
      } catch (err) {
        console.error("脚本加载失败:", err);
      }
    }

    // 调用加载函数
    loadAndUseScript("https://example.com/remote.js");
  </script>
</body>
</html>

方法2：Promise封装script标签（兼容传统非模块脚本） #

如果你的远程脚本是传统全局脚本（没有export，函数直接挂载到全局），可以通过监听script标签的load事件，用Promise封装加载流程，确保代码等待加载完成后再执行。

比如先调整remote.js为全局函数版本：

// remote.js（全局函数版）
function foo() {
  console.log("Hello from remote.js");
}

对应的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dynamic JavaScript loading example</title>
</head>
<body>
  <h1>Dynamic JavaScript loading example</h1>
  <script>
    // 封装加载脚本的Promise函数
    function loadScript(url) {
      return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = url;

        // 加载成功后触发resolve
        script.onload = () => resolve();
        // 加载失败触发reject
        script.onerror = (err) => reject(err);

        document.head.appendChild(script);
      });
    }

    // 用async/await等待加载完成
    async function useRemoteScript() {
      try {
        await loadScript("https://example.com/remote.js");
        // 此时foo已在全局作用域可用
        foo();
      } catch (err) {
        console.error("脚本加载失败:", err);
      }
    }

    useRemoteScript();
  </script>
</body>
</html>

关键注意点 #

1. 原代码的loadScript函数有语法错误：参数不能直接写字符串常量，要改成接收url参数。
2. 加载ES模块时，不需要手动设置script.type="module"，动态import()会自动处理。
3. 必须处理加载失败的场景，避免脚本加载出错导致后续代码崩溃。

内容的提问来源于stack exchange，提问作者Kenneth Ong