Implement 'error' callback for Dynamically loaded javascript file

Question

I am loading javascript dynamically and accessing its variable. I checked the second answer from this question and the following code works beautifully.

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);
});

QUESTION: I want to have a onFailure callback function as well that allows me to process code in case

The internet is down.
The filename is not accessible (eg: incorrect path)

Will appreciate if someone can guide me to the right direction. Thanks

The MDN page for the HTMLScriptElement has a good example which you can build off. — GregL
– GregL, Commented Feb 9, 2016 at 6:16

GregL · Accepted Answer · 2016-02-09 07:17:27Z

1

The MDN page for the HTMLScriptElement has a good example which you can build off.

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;
}

answered Feb 9, 2016 at 7:17

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vastlysuperiorman · Accepted Answer · 2016-02-09 05:47:57Z

I think the simplest solution is to actually use an XMLHttpRequest. This gives you access to the status of the request after it completes, where the "load" event does not. For simplicity, I'll illustrate with jQuery, but this can be written in vanilla javascript as well.

$.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!");
           }
});

Collectives™ on Stack Overflow

Implement 'error' callback for Dynamically loaded javascript file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related