Блог

Я хочу динамически импортировать jQuery в файл JS. Вот мой код:

 (function() {
  var head = document.querySelector("head")[0];
  if (head.classList.contains("En-Script") == true) {
    head.classList.add("En-Script");
    var script = document.createElement("SCRIPT");
    let EnScript = document.querySelector(".En-Script");
    script.type = "text/javascript";
    script.src = "./jquery-3.6.0.min.js";
    EnScript.appendChild("script");
  } else {
    console.log("class_list_added_for_further_process");
  }

  $(document).ready(function() {
    console.log("jquery added successfully")
  });
})();
 

Есть несколько ошибок, вы проверяли, есть ли у head класс "En-Script" , а затем добавили класс в head, поэтому я изменил проверку, чтобы это имело смысл. Затем вы выбирали головку, с помощью querySelector которой возвращается только 1 значение и с помощью [0] которой будет работать, если вы используете querySelectorAll вместо этого.

Затем вы должны добавить функцию jquery $(document) после загрузки скрипта, поэтому я добавил a script.onload для достижения этой цели.

Кроме того, когда вы добавляете ребенка, вы должны отправлять созданный вами объект, а не строку, поэтому вместо этого EnScript.appendChild("script"); Я использовал head.appendChild(script);

 (function() {

  var head = document.querySelector("head");
  if (!head.classList.contains("En-Script")) {
    head.classList.add("En-Script");
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
    script.onload = function() {
      $(document).ready(function() {
        console.log("jquery added successfully")
      });

    };
    head.appendChild(script);
  } else {
    console.log("class_list_added_for_further_process");
  }


})(); 

В вашем коде есть различные проблемы.

• querySelector возвращает один элемент, а не массив, поэтому document.querySelector("head")[0] не имеет смысла.
• С if (head.classList.contains("En-Script") == true) { вами проверьте , есть ли head у вас класс En-Script , что не имеет смысла в сочетании с head.classList.add("En-Script")
• Также добавление класса в заголовок, чтобы проверить, загружен ли сценарий, вероятно, не лучший подход, если вы хотите добавить класс или атрибут данных в script добавляемый элемент.
• Если у вас уже есть head , почему вы используете let EnScript = document.querySelector(".En-Script"); , чтобы запросить его снова?
• EnScript.appendChild("script"); пытается добавить тестовую строку с содержимым script EnScript , а не с элементом, который вы создали и сохранили в script переменной.
• $(document).ready(function() { не будет ждать, пока скрипт загрузится.
• Вызов .ready( при динамической загрузке jQuery также не имеет особого смысла, поскольку DOM уже прочитан.

Вот как может выглядеть загрузка сценария:

 (function() {
  var head = document.querySelector("head");

  var script = document.createElement("script");
  script.type = "text/javascript";

  script.onload = function() {
    // called when the script is loaded and ready to use
    console.log("jquery added successfully")
  }
  script.src = "https://code.jquery.com/jquery-3.6.0.slim.min.js";

  head.appendChild(script);

})();