Question

我正在为工具（sonarqube）编写一个html插件。在这种情况下，我需要先注册一个扩展，以下面的方式编写代码。

在运行代码时，我面临： ReferenceError: $ is not defined

代码：

window.registerExtension('CustomPlugin/muPlugin', function (options) {

    script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    document.head.appendChild(script);

    var pluginContainer = document.createElement('div');
    pluginContainer.setAttribute("id", "pluginContainer");
    options.el.appendChild(pluginContainer)
    $("#pluginContainer").load("/static/CustomPlugin/customPluginWebPage.html");  // Facing error on this line.

    return function () {};

});

当我第二次（但不是第一次）加载插件时，它可以工作。有什么建议，如何确定jquery第一次可用？

谢谢

Answer 1

可能重复-document.createElement(“script”) synchronously

ES5：

您可以使用“ onload”处理程序创建您的元素，当浏览器加载并评估脚本后就会调用该元素。

script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
//Bind a onload handler
script.onload = () => {
  console.log($);
};
document.head.appendChild(script);

编辑1：

ES6：

以上是最好的解决方案，除非您准备好在本地托管jQuery，否则可以使用异步运行的dynamic import()。支持不是很好-https://caniuse.com/#feat=es6-module-dynamic-import。这是another link的用法。我只建议在使用BabelJS的地方使用它。

import('./jquery.min.js').then((jquery) => {
  window.jQuery = jquery;
  window.$ = jquery;
  // The rest of your code
});

Answer 2

尝试使用setTimeOut()

window.registerExtension('CustomPlugin/muPlugin', function (options) {

script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
document.head.appendChild(script);

var pluginContainer = document.createElement('div');
pluginContainer.setAttribute("id", "pluginContainer");
options.el.appendChild(pluginContainer);
setTimeout(() => {
  $("#pluginContainer").load("/static/CustomPlugin/customPluginWebPage.html"); 
}, 2000);


return function () {};
});

首次加载时未定义“ $”

2 个答案: