为动态加载的javascript文件实现“错误”回调

Implement 'error' callback for Dynamically loaded javascript file

本文关键字：错误 回调 实现 文件 动态 加载 javascript      更新时间：2023-09-26

我正在动态加载javascript并访问其变量。我检查了这个问题的第二个答案，下面的代码运行良好。

include = function (url, fn) {
    var e = document.createElement("script");
    e.onload = fn;
    e.src = url;
    e.async=true;
    document.getElementsByTagName("head")[0].appendChild(e);
};
include("test.js",function(){
    console.log(foo);
});

问题：我还想有一个onFailure回调函数，允许我处理代码以防万一

  • 互联网关闭了。
  • 文件名不可访问(例如：路径不正确(

如果有人能引导我走向正确的方向，将不胜感激。谢谢

HTMLScriptElement 的 MDN 页面有一个很好的例子，你可以用它来构建。

function loadError (oError) {
  throw new URIError("The script " + oError.target.src + " is not accessible.");
}
function importScript (sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text'/javascript";
  oScript.onerror = loadError;
  if (fOnload) { oScript.onload = fOnload; }
  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
  oScript.src = sSrc;
}

我认为最简单的解决方案是实际使用XMLHttpRequest。这使您可以在请求完成后访问请求的状态，而"load"事件则不会。为了简单起见，我将用jQuery进行说明，但这也可以用vanilla javascript编写。

$.ajax({
    url:"myfile.js",
    method:"GET",
    dataType:"html",
    success: function(data, status, jqxhr) {
                 console.log("It worked");
                 // This can be very dangerous. Make sure you trust script source.
                 var newScript = $("<script>").html(data);
                 $('body').append(newScript);
             },
    error: function(jqxhr, status, error) {
               console.log("Oh no!");
           }
});

更多关于jQuery ajax请求的信息，请点击此处。

相关文章：