JavaScript中如何动态加载JS文件？

在网页开发中，动态加载JS文件是非常常见的需求，比如做懒加载、按需加载功能模块时就会用到。下面介绍几种常用的实现方式，你可以根据项目兼容性要求和开发习惯选择。

方式一：动态创建script标签

这是最传统也兼容性最好的方式，核心思路是通过JavaScript创建<script>标签，设置其src属性指向要加载的JS文件地址，再将标签插入到页面DOM中。

具体实现代码如下：

/**
 * 动态加载JS文件
 * @param {string} url - 要加载的JS文件地址
 * @param {function} callback - 加载完成后的回调函数
 */
function loadScript(url, callback) {
    // 创建script标签
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    // 监听加载完成事件
    if (script.readyState) { // IE兼容
        script.onreadystatechange = function() {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null;
                callback && callback();
            }
        };
    } else { // 其他浏览器
        script.onload = function() {
            callback && callback();
        };
    }
    // 将标签插入到head中
    document.getElementsByTagName('head')[0].appendChild(script);
}

// 使用示例
loadScript('https://ipipp.com/test.js', function() {
    console.log('JS文件加载完成');
});

这种方式的优点是兼容性极强，几乎支持所有浏览器，缺点是如果出现加载错误，需要额外添加onerror事件监听处理，逻辑会稍显复杂。

方式二：使用ES6动态import语法

现代浏览器和Node.js环境都支持ES6的模块系统，其中动态import()可以返回一个Promise，实现异步加载JS模块，语法更简洁，也支持错误处理。

实现代码如下：

// 动态加载JS模块
function loadJSModule(url) {
    return import(url)
        .then(module => {
            console.log('模块加载完成', module);
            return module;
        })
        .catch(err => {
            console.error('模块加载失败', err);
        });
}

// 使用示例
loadJSModule('./utils.js').then(utils => {
    // 使用加载的模块中的方法
    utils.sayHello();
});

这种方式适合现代前端项目，尤其是使用打包工具的项目，缺点是旧版本浏览器（如IE）不支持，如果需要兼容旧环境需要做额外的转译处理。

两种方式对比

为了更清晰地选择适合的方式，我们可以对比两种方案的特点：

注意事项

• 动态加载的JS文件要注意跨域问题，如果加载第三方域名的文件，需要确保对方服务器设置了正确的CORS头。
• 如果多次加载同一个JS文件，默认情况下浏览器会缓存该文件，不会重复发起请求，如果需要强制不缓存，可以在url后添加随机参数，比如url + '?t=' + Date.now()。
• 如果使用动态import加载模块，被加载的文件需要是ES模块格式，即文件内部使用export导出内容，否则无法正确获取模块对象。

JavaScript动态加载JS文件script标签修改时间：2026-05-29 23:05:35