var ele = document.createElement('script'); ele.type = "text/javascript"; ele.src = '...'; ele.onerror = function() { alert('error'); }; ele.onload = function() { alert('load'); }; document.body.appendChild(ele);
在新浏览器中，当发生错误时将会触发error事件，从而执行onerror回调弹出alert对话框：
但是麻烦在于，JQuery不会把这个<script>标签暴露给我们，所以我们没有机会为其添加onerror事件处理器。
下面是JQuery实现JSONP的主要代码：
jQuery.ajaxTransport( "script", function(s) { if ( s.crossDomain ) { var script, head = document.head || jQuery("head")[0] || document.documentElement; return { send: function( _, callback ) { script = document.createElement("script"); script.async = true; ... script.src = s.url; script.onload = script.onreadystatechange = ...; head.insertBefore( script, head.firstChild ); }, abort: function() { ... } }; } });
可以看到script是一个局部变量，从外部无法获取到。
那有没有解决办法呢？当然有：
自己实现JSONP，不使用JQuery提供的
修改JQuery源码（前提是你不是使用的CDN方式引用的JQuery）
使用本文介绍的技巧
前两种不说了，如果愿意大可以选择。下面介绍另一种技巧。
通过以上源码可以发现，JQuery虽然没有暴露出script变量，但是它却“暴露”出了<script>标签的位置。通过send方法的最后一句：
head.insertBefore( script, head.firstChild );
可以知道这个动态创建的新创建标签被添加为head的第一个元素。而我们反其道而行之，只要能获得这个head元素，不就可以获得这个script了吗？head是什么呢？继续看源码，看head是怎么来的：
head = document.head || jQuery("head")[0] || document.documentElement;
原来如此，我们也用同样的方法获取就可以了，所以补全前面的那个例子，如下：
var xhr = $.getJSON(...); // for "normal error" and ie 7, 8 xhr.fail(function(jqXHR, textStatus, ex) { alert('request failed, cause: ' + ex.message); }); // for 'abnormal error' in other browsers var head = document.head || $('head')[0] || document.documentElement; // code from jquery var script = $(head).find('script')[0]; script.onerror(function(evt) { alert('error'); });
这样我们就可以在所有浏览器（严格来说是绝大部分，因为我没有测试全部浏览器）里捕获到“非正常错误”了。
这样捕获错误还有一个好处：在IE7、8之外的其他浏览器中，当发生网络不通等问题时，JQuery除了会静默失败，它还会留下一堆垃圾不去清理，即新创建的<script>标签和全局回调函数。虽然留在那也没什么大的危害，但如果能够顺手将其清理掉不是更好吗？所以我们可以这样实现onerror：
// handle error alert('error'); // do some clean // delete script node if (script.parentNode) { script.parentNode.removeChild(script); } // delete jsonCallback global function var src = script.src || ''; var idx = src.indexOf('jsoncallback='); if (idx != -1) { var idx2 = src.indexOf('&'); if (idx2 == -1) { idx2 = src.length; } var jsonCallback = src.substring(idx + 13, idx2); delete window[jsonCallback]; }
这样一来就趋于完美了。
完整代码
function jsonp(url, data, callback) { var xhr = $.getJSON(url + '?jsoncallback=?', data, callback); // request failed xhr.fail(function(jqXHR, textStatus, ex) { /* * in ie 8, if service is down (or network occurs an error), the arguments will be: * * testStatus: 'parsererror' * ex.description: 'xxxx was not called' (xxxx is the name of jsoncallback function) * ex.message: (same as ex.description) * ex.name: 'Error' */ alert('failed'); }); // ie 8+, chrome and some other browsers var head = document.head || $('head')[0] || document.documentElement; // code from jquery var script = $(head).find('script')[0]; script.onerror = function(evt) { alert('error'); // do some clean // delete script node if (script.parentNode) { script.parentNode.removeChild(script); } // delete jsonCallback global function var src = script.src || ''; var idx = src.indexOf('jsoncallback='); if (idx != -1) { var idx2 = src.indexOf('&'); if (idx2 == -1) { idx2 = src.length; } var jsonCallback = src.substring(idx + 13, idx2); delete window[jsonCallback]; } }; }
以上代码在IE8、IE11、Chrome、FireFox、Opera、360下测试通过，其中360是IE内核版本，其他浏览器暂时未测。