当前位置：首页 > 全部内容 > 正文

JavaScript动态加载脚本的七种实现方案与兼容性处理

作者：木棉

时间：2026-10-30

浏览：417

本文汇总了JavaScript动态加载脚本的七种方法，包括document.write、修改src属性、动态创建script元素及XMLHttpRequest等。重点分析了异步加载导致的执行时序问题，并详细对比了各方法在IE、Firefox、Chrome等浏览器中的兼容性与同步加载实现，提供了封装好的loadJS函数供参考。

文章目录

动态加载脚本的背景与需求

本文详细介绍了几种在JavaScript中动态加载外部脚本文件的实现方式，旨在为开发者提供实用的参考方案。

随着前端地图产品模块化的需求增加，为了优化用户体验，系统倾向于按需加载功能模块，即用户访问特定功能时才加载对应的脚本资源。

因此四处查阅资料研究JS动态脚本加载，但结果令人失望！网上几乎全是同一篇文章，列举了4种方法，我厌恶那些抄袭他人成果且不提供原文链接的人。唉！关键是最后一种方法还存在错误。经过两天的研究与资料查阅，在此与大家分享。

为了演示加载效果，首先准备一个名为package.js的被加载脚本文件，该文件位于固定目录下，内部定义了一个名为functionOne的方法，具体代码如下：


function functionOne(){
  alert("成功加载");
}

后续所有测试用的HTML文件均创建在与package.js相同的目录中，以确保路径引用正确。

基于DOM操作的异步加载方案

第一种方案是利用document.write方法直接写入脚本标签。

在相同目录下创建function1.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

通过document.write向页面注入script标签可以实现脚本加载。点击“初始化加载”按钮后，虽然会执行package.js，但立即调用functionOne会报错，因为脚本尚未加载完成。只有点击后续动态生成的“测试运行效果”按钮时，由于脚本已加载完毕，functionOne才能正常执行。这种方式属于异步加载，且document.write会覆盖当前页面内容，因此实际应用中并不推荐。

第二种方案是通过动态修改已存在的script元素的src属性来加载脚本。

在相同目录下创建function2.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript" id="yy" src=""></script>
  <script type="text/javascript">
    function init()
    {
      yy.src = "package.js";
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

该方法的优点是不会重写页面DOM结构，避免了界面闪烁或重置的问题。然而，它同样属于异步加载，存在脚本加载完成前调用函数会报错的时序问题。

第三种方案是动态创建script元素，并设置其src属性指向外部文件，属于异步加载模式。

在相同目录下创建function3.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

相比第二种方法，此方案无需预先在HTML中预留script标签，更加灵活。但缺点依然是异步加载，可能导致后续代码执行时脚本尚未就绪。

上述三种方法均属于异步加载，即在加载外部脚本的同时，主线程继续执行后续代码。如果依赖加载后的脚本内容，直接执行后续代码将无法达到预期效果。

为了解决异步加载导致的执行顺序问题，一种简单的测试手段是在调用functionOne前添加alert阻塞主线程，或者将后续代码封装在按钮点击事件中逐步执行。此外，也可以使用定时器延迟执行后续代码。但在实际项目中，这些临时方案并不具备通用性和稳定性。

实际上，对第三种方法进行适当修改，即可实现同步加载脚本。

基于Script元素内容的同步加载方案

第四种方案是通过动态创建script元素，但将脚本内容作为字符串直接写入，实现同步加载。

在相同目录下创建function4.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

此方法并未加载外部JS文件，而是将代码作为子节点添加到script元素中。在Firefox、Safari、Chrome、Opera及IE9及以上版本中，这种方式可以正常运行。但在IE8及更低版本中，由于IE将script视为特殊元素，禁止通过DOM访问其子节点，因此会报错。对于IE，可以通过设置script元素的text属性来指定JS代码，示例如下：


var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

经过上述修改，代码可在IE、Firefox、Opera及Safari3及以上版本中运行。对于Safari3.0之前的版本，虽然不支持text属性，但支持通过文本节点技术指定代码。为了兼容早期Safari，可采用以下代码：


var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

该策略首先尝试标准的DOM文本节点方法，因为除IE8及以下版本外，主流浏览器均支持。若执行出错，则判定为IE8及以下，转而使用text属性。整个过程可封装为一个函数：


function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

通过上述函数，可以在其他位置调用以加载所需代码。其执行效果等同于在全局作用域中通过eval()执行相同字符串，但仅限于字符串形式的代码，存在一定局限性。通常用户更希望使用如loadScriptAddress("package.js")这样的接口加载外部文件，因此需要进一步探讨其他方案。

基于XMLHttpRequest的加载方案

第五种方案是利用XMLHttpRequest或ActiveXObject进行异步加载。

在相同目录下创建function5.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置script的id为yy
      ajaxPage("yy","package.js");
      //此方法为package.js里面的方法，此处执行方法成功
      functionOne();
    }
    function ajaxPage(sId,url)
    {
      var oXmlHttp = getHttpRequest();
      oXmlHttp.onreadystatechange = function()
      {
        //4代表数据发送完毕
        if ( oXmlHttp.readyState == 4 )
        {
          //0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
          if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
          {
            includeJS(sId,oXmlHttp.responseText);
          }
          else
          {
          }
        }
      }
      oXmlHttp.open("GET",url,true);
      oXmlHttp.send(null);
    }
    function getHttpRequest()
    {
      if(window.ActiveXObject)//IE
      {
        return new ActiveXObject("MsXml2.XmlHttp");
      }
      else if(window.XMLHttpRequest)//其他
      {
        return new XMLHttpRequest();
      }
    }
    function includeJS(sId,source)
    {
      if((source != null)&&(!document.getElementById(sId)))
      {
        var myHead = document.getElementsByTagName("HEAD").item(0);
        var myScript = document.createElement( "script" );
        myScript.language = "javascript";
        myScript.type = "text/javascript";
        myScript.id = sId;
        try{
          myScript.appendChild(document.createTextNode(source));
        }
        catch (ex){
          myScript.text = source;
        }
        myHead.appendChild( myScript );
      }
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

ActiveXObject仅IE浏览器支持，其他主流浏览器主要支持XMLHttpRequest。通过此方式可实现动态加载，但仍为异步加载，直接调用functionOne会失败，需二次点击按钮方可执行。此外，该方案在IE、Firefox、Safari中运行正常，但在Opera和Chrome中会报错，Chrome下的错误信息如下：

动态加载脚本的背景与需求

需要注意的是，当项目发布后，在Chrome和Opera环境中通常不会出现此类错误。

若将open方法中的第三个参数设置为false，则可实现同步加载，此时无需设置onreadystatechange事件。

第六种方案是利用XMLHttpRequest或ActiveXObject进行同步加载。

综合考虑浏览器兼容性及Chrome、Opera的特殊情况，将上述逻辑封装为loadJS.js文件，以便后续直接调用，代码如下：


/**
 * 同步加载js脚本
 * @param id  需要设置的<script>标签的id
 * @param url  js文件的相对路径或绝对路径
 * @return {Boolean}  返回是否加载成功，true代表成功，false代表失败
 */
function loadJS(id,url){
  var xmlHttp = null;
  if(window.ActiveXObject)//IE
  {
    try {
      //IE6以及以后版本中可以使用
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      //IE5.5以及以后版本可以使用
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
  {
    xmlHttp = new XMLHttpRequest();
  }
  //采用同步加载
  xmlHttp.open("GET",url,false);
  //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
  xmlHttp.send(null);
  //4代表数据发送完毕
  if ( xmlHttp.readyState == 4 )
  {
    //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
    if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
    {
      var myHead = document.getElementsByTagName("HEAD").item(0);
      var myScript = document.createElement( "script" );
      myScript.language = "javascript";
      myScript.type = "text/javascript";
      myScript.id = id;
      try{
        //IE8以及以下不支持这种方式，需要通过text属性来设置
        myScript.appendChild(document.createTextNode(xmlHttp.responseText));
      }
      catch (ex){
        myScript.text = xmlHttp.responseText;
      }
      myHead.appendChild( myScript );
      return true;
    }
    else
    {
      return false;
    }
  }
  else
  {
    return false;
  }
}

该封装函数已处理浏览器兼容性问题，并针对Chrome和Opera做了特殊处理（需发布后运行）。注释清晰，后续加载JS文件时，只需调用如loadJS("myJS","package.js")即可，使用便捷。

若希望在不发布项目的情况下仍兼容所有浏览器，目前尚未找到完美的同步加载方案。因此，对于异步加载场景，通常通过回调函数来处理后续逻辑。

基于回调函数的异步处理方案

第七种方案是通过回调函数方式处理异步加载结果。

在相同目录下创建function7.html文件，其核心代码如下：


<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置script的id为yy
      loadJs("yy","package.js",callbackFunction);
    }
    function callbackFunction()
    {
      functionOne();
    }
    function loadJs(sid,jsurl,callback){
      var nodeHead = document.getElementsByTagName('head')[0];
      var nodeScript = null;
      if(document.getElementById(sid) == null){
        nodeScript = document.createElement('script');
        nodeScript.setAttribute('type', 'text/javascript');
        nodeScript.setAttribute('src', jsurl);
        nodeScript.setAttribute('id',sid);
        if (callback != null) {
          nodeScript.onload = nodeScript.onreadystatechange = function(){
            if (nodeScript.ready) {
              return false;
            }
            if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
              nodeScript.ready = true;
              callback();
            }
          };
        }
        nodeHead.appendChild(nodeScript);
      } else {
        if(callback != null){
          callback();
        }
      }
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

该方式在所有浏览器中均受支持，但后续代码必须封装在回调函数内执行，本质上仍是异步加载。开发者可根据实际需求选择同步或异步方案。个人更倾向于第六种封装方法，因其提供了更清晰的接口。若仅需异步加载，还有多种其他实现方式，但本文重点在于同步加载的探讨，故未对异步方案做过多总结。

希望本文所述的JavaScript动态加载脚本方法能对各位开发者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS运算符优先级与结合性的区别是什么？

JS Map怎么只遍历Key或Value

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

为什么JS中typeof []返回object：数组类型检测误区解析

D3.js 新手入门：环境搭建与第一个条形图实现

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例