如何动态加载带有属性的js文件并在加载时执行回调？

Question

我尝试过什么

jQuery的$.getScript执行其中两项操作，但我不知道如何将属性添加到它添加到页面的标记中。

我也试过这个（注意：它在Coffeescript中）：

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

有了上述内容，文件会加载并且有适当的标记，但永远不会调用onAlohaLoad。

如何实现全部三个 - 动态加载文件，在脚本标记中包含属性，并在加载时执行回调？

这是coffeescript，它解释了我想做什么，但它不起作用：

$ ->
  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

您可以通过AJAX将其作为文本获取，并将其添加到脚本标记的innerHTML属性中。然后在追加它之前（或之后），您可以在该脚本元素上设置属性。

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