JavaScript动态加载JS文件的多种实现方案总结

作者：纸飞机

时间：2026-10-27

本文总结了JavaScript中动态加载JS文件的多种实现方式，包括利用document.write直接写入、修改现有Script元素的src属性、通过DOM操作动态创建Script节点以及封装自定义加载函数等方法。文章还探讨了异步加载可能导致的执行顺序问题，并介绍了基于Ajax的加载方案以解决依赖冲突。

文章目录

动态加载JS文件的方法概述

下面介绍一种完全通过动态方式加载脚本的方法。

具体代码实现如下：

/*
动态加载JS v1.0 by：dum
使用方式：src="webJsBase.js?load=a,b"
注意：此方法用于加载当前目录下的JS文件。
*/
var webJsBase = {
require: function(libraryName) {
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
    },
load: function(defaultLoad) {
if((typeof Prototype=='undefined')||(typeof Element == 'undefined')||(typeof Element.Methods=='undefined'))
throw ('prototype lib 加载失败！');
if(typeof defaultLoad=='undefined')defaultLoad='';
var js = /webJsBase.js(?.*)?$/;
$$('head script[src]').findAll(function(s) {
return s.src.match(js);
}).each(function(s) {
var path = s.src.replace(js, '');
var includes = s.src.match(/?.*load=([a-zA-Z0-9_,]*)/);
(includes ? includes[1] : defaultLoad).split(',').each(function(include) {
webJsBase.require(path + include + '.js');
            });
        });
    }
};
webJsBase.load(); //这里参数可以指定默认要加载的js文件

基于document.write的简单加载法

这是最简单的方法，在页面加载完成后利用document.write直接插入脚本标签，效果如图所示。

具体代码示例如下：

<script language="javascript">
document.write("<script src='test.js'></script>");
</script>

修改现有Script标签的src属性

另一种思路是给原有的Script标签添加一个id，然后通过JavaScript动态修改该元素的src属性。

具体代码示例如下：

<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>

动态创建Script元素节点

此外，还可以利用getElementsByTagName('HEAD')获取头部元素，并动态创建script元素节点。

具体代码示例如下：

 
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="test.js";
oHead.appendChild( oScript);
</script>

封装自定义加载函数

还可以尝试封装一个自定义函数来实现类似功能。

具体代码示例如下：

function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}

调用该方法，其效果类似于PHP中的include函数。

具体调用示例如下：

include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");
include(baseDir + "/model/MapModel.js");
include(baseDir + "/model/MapType.js");
include(baseDir + "/model/Tile.js");

此外，也有开发者提到可以使用ExtJs4进行动态加载，但此处不再赘述，上述方法已足以实现JS的动态加载需求。