Swup.js перестают работать скрипты

Question

Есть некий код на jquery все работала прекрасно но как только я подключил swup.js все скрипты перестали работать как это можно исправить ?

Answer 1

Спустя два дня я нашел решение этой проблемы. Всё, что нужно, - это добавить скрипт вручную через js.

Приведу пример. Я использовал конструктор карт от "Яндекс.Карты". Чтобы вставить этот блок, нужно вставить скрипт такого вида

<script class="map" type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%...&amp;width=450&amp;height=350&amp;lang=ru_RU&amp;scroll=true"></script>

Но если перейти на страницу через swup, то скрипт не прогрузится и вот как я решил эту проблему.

documentSite.addEventListener('swup:contentReplaced', (event) => {
        var page = documentSite.location.pathname.split("/");

        switch(page[1]){
            case "":
                var script = documentSite.createElement("script");
            script.setAttribute("class", "map");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("charset", "utf-8");
            script.setAttribute("src", "https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%...&amp;width=450&amp;height=350&amp;lang=ru_RU&amp;scroll=true");

            documentSite.getElementById("table_market_1").insertBefore(script, documentSite.getElementById("text_map_1"));
            break;
                
            case "assortment":
                onAssortment();
            break;
        }
    });

Я отследил событие переключения страниц

documentSite.addEventListener('swup:contentReplaced', (event) => {
      
        });

получил url нашей страницы

var page = documentSite.location.pathname.split("/");

и запихнул это в switch case, где

""

это главная страница сайта, где и были блоки от "Яндекс.Карты", а

"assortment"

любая другая страница сайта.

Отследили, дальше нам нужно сгенерировать блок скрипта и вставить в него необходимые данные

var script = documentSite.createElement("script"); //Создаем блок
            script.setAttribute("class", "map"); //Добавляем ему класс
            script.setAttribute("type", "text/javascript"); //Тип
            script.setAttribute("charset", "utf-8"); //Кодировка
            script.setAttribute("src", "https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A4aa433a8c219fbd0074d044a86267314c7b06b92c3a619a8f03a52e55d8ba6db&amp;width=450&amp;height=350&amp;lang=ru_RU&amp;scroll=true"); //И сам скрипт

Ну а теперь его остается просто вставить туда, куда вы его вставляли в файле разметки

documentSite.getElementById("table_market_1").insertBefore(script, documentSite.getElementById("text_map_1"));

Тут я использую метод insertBefore(), который вставляет элемент перед другим, но можно использовать и простой appendChild(), а переменная documentSite, это кэшированная переменная document

А теперь совет, чтобы все это работало адекватно: данный код лучше выполнять не только при смене страниц, но и при обычной загрузке страниц, через обычный тег <script></script> в конце боди, а сам скрипт удалить из файла разметки

БЛОГ НА HUSL

Swup.js перестают работать скрипты

Ответы (1 шт):