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

$/jQuery not defined when dynamically adding scripts

本文关键字：jQuery 未定义 添加 脚本 动态      更新时间：2023-09-26

我正在头中动态添加不同.js资源的<script>标签，但我收到一个错误，惊呼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);
}

在添加script标签后，您不能指望script已经从网络上拔出并嵌入到您的页面上。它将异步加载。

您需要等待，或者您可以在script上使用.onload。

示例：您还应该在附加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";
相关文章：