如何在Angular.js的index.html中按需加载脚本适配IE浏览器

嘿，这问题我熟！之前维护老项目的时候天天跟IE打交道，用Angular.js完全能搞定这个需求，不用纯JS硬写，下面给你一步步来：

1. 先移除HTML里的静态脚本引用 #

首先把你原来在HTML里写的<script src='app/constantes.js'></script>这类静态引用删掉——静态脚本会不管浏览器类型直接加载，根本达不到我们按需加载的目的。

2. 编写IE检测+动态加载逻辑 #

在Angular的run块（或者封装成专门的服务）里注入$window和$q，用Angular的方式完成浏览器判断和脚本加载：

angular.module('yourAppName')
  .run(['$window', '$q', function($window, $q) {
    // 检测是否为IE浏览器（覆盖IE10、IE11及更早版本）
    function isInternetExplorer() {
      return /MSIE|Trident\/|Edge\/12./i.test($window.navigator.userAgent);
    }

    // 封装脚本加载函数，返回Promise处理异步加载
    function loadScript(url) {
      var deferred = $q.defer();
      var script = $window.document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      
      script.onload = function() {
        deferred.resolve();
      };
      script.onerror = function() {
        deferred.reject('脚本加载失败: ' + url);
      };
      
      $window.document.body.appendChild(script);
      return deferred.promise;
    }

    // 根据浏览器类型加载对应脚本
    if (isInternetExplorer()) {
      // IE环境下仅加载兼容脚本
      loadScript('app/constantes-ie-compatible.js')
        .then(function() {
          console.log('IE兼容脚本加载完成');
        })
        .catch(function(err) {
          console.error(err);
        });
    } else {
      // 非IE环境加载常规脚本
      loadScript('app/constantes.js')
        .then(function() {
          console.log('常规脚本加载完成');
        })
        .catch(function(err) {
          console.error(err);
        });
      // 如果有多个脚本需要加载，可以链式调用：
      // loadScript('app/constantes.js')
      //   .then(() => loadScript('app/another-script.js'))
      //   .then(...);
    }
  }]);

3. 关键细节说明 #

• 用Angular的$q处理异步：脚本加载是异步操作，Promise能确保脚本加载完成后再执行后续逻辑，避免依赖报错。
• 动态创建脚本标签：必须通过Angular控制脚本的创建时机，不能用静态<script>——静态脚本会在Angular启动前就加载，完全不受我们的逻辑控制。
• 精准的IE判断：上面的正则已经覆盖了主流IE版本，如果你只需要针对特定版本（比如仅IE11），可以调整正则为/Trident\/7./i.test($window.navigator.userAgent)。

4. 进阶：封装成可复用服务 #

如果项目里有多处需要动态加载脚本，建议把逻辑封装成Angular服务，更符合模块化思想：

angular.module('yourAppName')
  .factory('browserScriptLoader', ['$window', '$q', function($window, $q) {
    return {
      isIE: function() {
        return /MSIE|Trident\/|Edge\/12./i.test($window.navigator.userAgent);
      },
      loadScript: function(url) {
        var deferred = $q.defer();
        var script = $window.document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.onload = deferred.resolve;
        script.onerror = () => deferred.reject('脚本加载失败: ' + url);
        $window.document.body.appendChild(script);
        return deferred.promise;
      }
    };
  }]);

之后在run块或控制器里注入使用即可：

angular.module('yourAppName')
  .run(['browserScriptLoader', function(browserScriptLoader) {
    if (browserScriptLoader.isIE()) {
      browserScriptLoader.loadScript('app/constantes-ie-compatible.js');
    } else {
      browserScriptLoader.loadScript('app/constantes.js');
    }
  }]);

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