Скрипты не добавляются в элемент при AJAX-запросе - почему?

Скрипты не добавляются в элемент при AJAX-запросе – почему?

На чтение 3 мин Опубликовано 28.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Анализ проблем
Решение
Преимущества нового подхода:
Заключение

Вопрос или проблема

Я пытаюсь (и неудаюсь) загрузить скрипты в заголовок определённых постов до того, как загрузится остальная часть страницы. В некоторых из моих постов есть встраивания, которые требуют скрипты для работы, но мой самодельный код ниже не работает должным образом.

Этот AJAX-запрос успешно отправляется, скрипты фильтруются из полученных данных, но по какой-то причине мой AJAX-запрос не добавляет эти скрипты в элемент head в моем HTML-коде. Так где я неправ?

(function ($) {
    $(document).ready(function () {

      var $mainContent = $(".main");
      var value;
      $this="";

      $(document).on("click", "#posts a", function (e) {
        e.preventDefault();
        $this = $(this);
        value = $this.attr("href");

          $.ajax({
            url: value,
            type: 'POST',
            dataType: "html",
            error: function (data) {
              console.warn(data);
            },
            success: function (data) {
              var dom = $(data);
              dom.filter("script").each(function () {
                if (this.src) {
                  var script = document.createElement('script'),
                    i, attrName, attrValue, attrs = this.attributes;
                  for (i = 0; i < attrs.length; i++) {
                    attrName = attrs[i].name;
                    attrValue = attrs[i].value;
                    script[attrName] = attrValue;
                  }
                  document.getElementsByTagName("head")[0].appendChild(script);
                }
              });
            }
          }).done(function (data) {
            var dom = $(data);
            $mainContent.html(dom.find('.main').html());
          });
      });
    });
  })(jQuery);

Этот код сработал для меня:

    success: function (data) {
      var dom = $(data);
      scripts = dom.filter('script').each(function () {
        script = $(this);
        $("head").append(script);
      });
      //...другой код
    }

Ответ или решение

Когда вы работаете с AJAX-запросами и пытаетесь динамически добавлять скрипты в элемент <head> вашего HTML-документа, может возникнуть несколько проблем, которые не позволяют корректно выполнять эту задачу. Давайте подробно рассмотрим ошибки в вашем коде и предложим оптимизированное решение.

Анализ проблем

Создание элемента скрипта:
В вашем оригинальном коде скрипт создается с помощью document.createElement('script'), но вы не задаете его атрибут src должным образом, если скрипт имеет атрибут src. Это может привести к тому, что скрипт не будет загружен.
Использование jQuery:
Вы используете jQuery для фильтрации и создания элементов, однако вызываете нативные методы JavaScript, что может привести к несоответствиям.
Порядок загрузки:
Ваш код вставляет скрипты в <head> после того, как был выполнен обычный AJAX-запрос. Из-за этого не гарантируется, что загруженные скрипты будут выполнены именно в тот момент, когда вам это нужно.

Решение

В качестве решения мы можем упростить ваш код и сделать его более эффективным. Вместо использования нативного JavaScript для создания элементов, воспользуемся jQuery, что упростит процесс управления атрибутами. Вот более оптимизированный вариант вашего кода:

(function ($) {
    $(document).ready(function () {

        var $mainContent = $(".main");

        $(document).on("click", "#posts a", function (e) {
            e.preventDefault();
            var value = $(this).attr("href");

            $.ajax({
                url: value,
                type: 'POST',
                dataType: "html",
                error: function (data) {
                    console.warn(data);
                },
                success: function (data) {
                    var dom = $(data);

                    // Добавляем скрипты в <head>
                    dom.filter("script").each(function () {
                        var script = $(this);
                        $("head").append(script.clone()); // Клонируем и добавляем скрипт в head
                    });

                    // Обновляем основной контент
                    $mainContent.html(dom.find('.main').html());
                }
            });
        });
    });
})(jQuery);

Преимущества нового подхода:

Упрощенный код: Теперь мы используем только jQuery для добавления скриптов, что делает код более читаемым и поддерживаемым.
Клонирование скрипта: Использование функции .clone() гарантирует, что оригинальный элемент скрипта не будет затронут, и вы сможете корректно добавлять содержание в <head>.
Корректное выполнение скриптов: Поскольку вы добавляете скрипты непосредственно в успехе AJAX, они будут выполняться в нужный момент.

Заключение

Работая с динамическими запросами и скриптами, важно понимать порядок загрузки и исполнения. Используя приведенные рекомендации, вы сможете избежать распространенных ошибок и обеспечить корректную интеграцию скриптов на вашу страницу. Если возникнут новые вопросы или проблемы, не стесняйтесь обращаться за помощью!