JavaScript 中怎么实现动态加载外部脚本文件并监听加载完成事件-js教程-PHP中文网

最常用、最可靠的方式是创建 script 元素并插入文档，通过 onload/onerror 事件监听加载状态；动态脚本立即执行于全局作用域，import() 仅适用于支持的 es 模块环境。

javascript 中怎么实现动态加载外部脚本文件并监听加载完成事件

JavaScript 中动态加载外部脚本最常用、最可靠的方式是创建 <script></script> 元素并插入到文档中，再通过其 onload 和 onerror 事件监听加载完成或失败。

使用原生 script 标签 + 事件监听

这是兼容性最好、语义最清晰的方法，适用于所有现代浏览器及 IE9+：

创建 script 元素，设置 src 属性指向目标 JS 文件
绑定 onload 回调处理成功加载（脚本已执行完毕）
绑定 onerror 回调捕获加载失败（如 404、跨域、网络中断等）
将 script 插入 document.head 或 document.body 触发加载

示例代码：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true; // 推荐启用 async，避免阻塞页面解析

    script.onload = () => {
      resolve(script); // 加载并执行完成
    };

    script.onerror = (err) => {
      reject(new Error(`Failed to load script: ${src}`));
    };

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

// 使用方式
loadScript('/path/to/module.js')
  .then(() => console.log('脚本加载并执行完成'))
  .catch(err => console.error(err));

注意 script 的执行时机与作用域

动态插入的脚本会在下载完成后**立即执行**，且运行在全局作用域中，因此其中定义的变量、函数会挂载到 window 上（非模块环境）。需注意：

不能直接用 import 动态导入 CommonJS/ESM 模块（需用 import()）
若脚本依赖其他库（如 jQuery），请确保被依赖脚本已先加载完成
重复加载同一 URL 脚本时，浏览器通常会复用缓存，但 onload 仍会触发（除非脚本已被插入且未移除）

替代方案：使用 import() 动态导入（ES2020+）

如果目标脚本是标准 ES 模块（type="module"），且运行环境支持动态 import()（Chrome 63+、Firefox 67+、Safari 11.1+），可直接使用：

import() 返回 Promise，天然支持异步等待
自动处理依赖、作用域隔离，不污染全局
仅支持同源或 CORS 配置正确的模块（服务端需返回 Access-Control-Allow-Origin）

示例：

// ✅ 正确：路径必须是字符串字面量或模板字符串（不能是变量拼接，除非 webpack/vite 等打包器支持）
import('/path/to/module.js')
  .then(module => {
    module.someFunction(); // 直接使用导出内容
  })
  .catch(err => console.error('模块加载失败', err));