动态添加脚本时未定义$/jQuery

Question

我动态地将<script>不同.js资源的标签添加到头部,但是我收到一个错误的惊叹jQuery is not defined.

我知道jQuery实际上正在工作,因为流程中的其他功能正在正常工作.下面是我用来动态地将这些脚本添加到标题的代码.如您所见,我还在任何其他插件之前包含jQuery.

document.addEventListener("DOMContentLoaded", AddExternals)

function AddExternals(){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";


    var t2e = document.createElement("script");
    t2e.type = "text/javascript";
    t2e.src = "/test/rfsystem/rfJavascript/table2excel.js";

    document.getElementsByTagName("head")[0].appendChild(jq);
    document.getElementsByTagName("head")[0].appendChild(t2e);

   console.log(jQuery);
}

Answer 1

在附加script标签之后,您不能指望它script已从网络中拉出并嵌入到您的页面中.它将异步加载.

你需要等待,或者你可以使用.onload它script.

例如: 在附加onload事件之前,您还应该将脚本附加到DOM,并且应该在onload事件之后设置src属性:

    var jq = document.createElement("script");
    jq.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(jq);
    jq.onload = function() { console.log(jQuery); };
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";