动态加载Javascript脚本无法调试错误的问题

小方原创哦——至少我目前没有在网上搜索到这样的思想:

如果你使用ajax来动态加载远程脚本,你会遇到痛苦的问题:一旦新远程的js文件内部有语法错误,你将找不到是出错在哪个js文件的哪一行。

所以你可能想到了使用script标签动态创建的方法来解决。然后非常遗憾,IE 9 以下的IE家庭并不支持 script 的 onerror 属性,而且在onreadystatechange事件中,并没有status == 200 或者  status == 404的状态值。也就是,你没有办法在加载出错时做异常处理。

但是还好,我们一般开发都在firefox下基本firebug开发,而精确显示js语法错误也只在开发时有用。所以呢:

1. 为IE 9以下的所有IE家庭浏览器使用XHR (XmlHttpRequest)来加载远程脚本

2. 为其他浏览器使用动态创建 script 标签的方法来提供精确调试。

以下是脚本:


var onSuccess = (function() {

  // do something

});

var onError = function() {
  // do something
};

var url = controllerID + '/Class.js';//请求的URL

if(!$.support.leadingWhitespace) {
  // ie, version < 9
  // via ajax
  $.ajax({
    url: url,
    dataType : 'html',
    success : function(response){
      onSuccess();
    },
    error : function(){
              onError();
            }
  });
} else {
  // support onload && onerror
  // via script dynamic load
  // to support debug file base on line number
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  script.onload = onSuccess;
  script.onerror = onError;
  var head= document.getElementsByTagName('head')[0];
  head.appendChild(script);
}



1 thought on “动态加载Javascript脚本无法调试错误的问题”

Comments are closed.