javascript - 使用innerHTML注入(inject)的脚本不会触发onload和onerror

Question

我正在尝试绑定(bind) script 标记的 onload 和 onerror 事件。从 src 加载时效果很好。给定以下函数:

function injectJS(src, inline) {
    var script = document.createElement("script");

    if (inline) {
        script.innerHTML = src;
    } else {
        script.src = src;
    }

    script.onload = function() {console.log("Success!");};
    script.onerror = function() {console.log("Error!");};

    document.body.appendChild(script);
}

我可以轻松知道脚本是否已加载:

> injectJS("https://code.jquery.com/jquery-3.1.1.min.js");
Success!

> injectJS("https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js");
Error!

但是当使用innerHTML注入(inject)内联JS时，脚本不会触发事件:

> injectJS("console.log(\"Yes!\");", true);
Yes!

> injectJS("console.log(\"Loaded but error...\"); error;", true);
Loaded but error...

在这些情况下，尚未记录

Success!。但是，我可以在前面添加一些可以调用函数的代码，例如，在加载脚本后。

当存在阻止脚本加载的错误时，就会出现问题，例如语法错误:

> injectJS("console.log(\"Success! Or not..\"); syntax error;", true);

没有记录任何内容(当然，错误除外)。如何在加载之前检测注入(inject)的脚本是否已加载或出错？

编辑:

奥里奥尔的answer为我指明了正确的方向。作为引用，这里是最终的函数，它完全按照我的预期工作并通过了 5 个测试用例:

function injectJS(src, inline, on_success, on_error) {
    var script = document.createElement("script");

    script.onload = on_success;
    script.onerror = on_error;

    if (inline) {
        script.innerHTML = "window.script_loaded = true; " + src;
    } else {
        script.src = src;
    }

    document.body.appendChild(script);

    if (inline) {
        var loaded = window["script_loaded"];
        window.script_loaded = false;

        if (loaded) {
            on_success();
        } else {
            on_error();
        }
    }
}

Answer 1

Inline scripts are loaded synchronously 。所以您根本不需要这些事件。

直接使用

function injectJS(src, inline) {
  var script = document.createElement("script");
  script.onload = function() {console.log("Success!");};
  script.onerror = function() {console.log("Error!");};
  if (inline) {
    script.innerHTML = src;
    script.onload();
  } else {
    script.src = src;
  }
  document.body.appendChild(script);
}
injectJS("console.log(\"Yes!\");", true);

您将无法检测语法错误，但这就像外部脚本一样。 error 事件仅表示脚本无法下载，而不表示语法错误。