Question

What I’ve Tried

jQuery’s $.getScript does two of those things, but I don’t know how to add an attribute to the tag it adds to the page.

I also tried this (note: it’s in Coffeescript):

$("<script>", {src: alohaScriptUrl, "data-aloha-plugins": alohaPlugins})
  .bind("load ready", onAlohaLoad) // also tried: .load(onAlohaLoad)
  .appendTo("head")

With the above, the file loads and there’s the appropriate tag, but onAlohaLoad is never called.

How do I achieve all three – loading a file dynamically, have attributes in the script tag, and execute a callback on load?

Here’s coffeescript that explains what I’d like to do, but it doesn’t work:

$ ->
  onAlohaLoad = ->
    console.log("aloha loaded")

  if localStorage["isAdmin"] == "true"
    alohaScriptUrl = "/plugins/alohaeditor-0.20.0-RC9/lib/aloha.js"
    alohaPlugins = "common/format"
    $("<script>", {src: alohaScriptUrl, "data-aloha-plugins": alohaPlugins})
      .bind("load ready", onAlohaLoad)
      .appendTo("head")

Answer 1

You could fetch it through AJAX as text and out it in the innerHTML property of a script tag. Then before appending it (or after), you can set your attributes on that script element.

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.js", true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if (xhr.readyState != 4)
        return;

    var script = document.createElement("script");
    script.innerHTML = xhr.responseText;
    script.setAttribute(); //add attributes
    document.body.appendChild(script);

    console.log("callback!");
};