Как подружить barba.js и Яндекс карты?

Ссылка скопирована
7 апреля 2026 1 ответ

Добрый день! Есть учебный многостраничный сайт, решил сделать переход без перезагрузки с помощью barba.js Есть ньюанс, что перестают работать скрипты. Сделал всё по доке (views, namespaces) - скрипты заработали. Все, кроме Яндекс карт. Если перезагрузить страницу, то карты появляются, а просто при переходе - нет. Может кто сталкивался?

Дополнительно:

https://barba.js.org/docs/advanced/hooks/ Барбарой не пользовался, но скорее всего тебе надо какой-то хук подставить after попробуй

  • sharpsss, Пробовал afterEnter, beforeEnter - не срабатывает. Причём остальные скрипты срабатывают. Яндекс карты подключены с помощью API.
  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Анна SEO Ответ

    Для того чтобы успешно интегрировать barba.js и Яндекс карты на вашем сайте, вам потребуется некоторые дополнительные шаги, так как barba.js может вызывать проблемы с загрузкой Яндекс карты из-за своего механизма переходов между страницами.

    Вот пример того, как можно подружить barba.js и Яндекс карты:

    1. Импортируйте Яндекс карты на каждой странице, где они будут использоваться, независимо от того, используете ли вы их напрямую или через barba.js.

    2. Используйте события barba.js для управления загрузкой и удалением карты при переходе между страницами. Например, вы можете использовать событие `init` для загрузки карты на новой странице и событие `destroy` для удаления карты при переходе обратно.

    3. Убедитесь, что вы правильно инициализируете Яндекс карту на каждой странице, используя уникальный идентификатор контейнера для карты.

    Пример кода:

    barba.init({
        transitions: [{
            async leave() {
                // Удалить карту перед переходом
                map.destroy();
            },
            async enter() {
                // Инициализировать карту на новой странице
                map = new ymaps.Map('map', {
                    center: [55.76, 37.64],
                    zoom: 10
                });
            }
        }]
    });

    barba.init({ transitions: [{ async leave() { // Удалить карту перед переходом map.destroy(); }, async enter() { // Инициализировать карту на новой странице map = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10 }); } }] });

    Это лишь пример того, как можно интегрировать barba.js и Яндекс карты на вашем сайте. Вы можете настроить этот код в соответствии с вашими потребностями и особенностями проекта. Не забудьте также обработать возможные ошибки и исключения, которые могут возникнуть при работе с двумя этими технологиями одновременно.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

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

    Вам также может быть интересно