Сохранение состояния страницы при использований Insight через внешний фрейм

Конструктор
,
#1

Всем доброго времени суток. В данной статье мы рассмотрим новую функциональность - сохранения состояния проекта Insight при работе через внешний фрейм.

Будет рассмотрен кейс, когда компания внедрила дашборд Insight через iframe, но столкнулась с проблемой потери состояния фрейма при перезагрузке страницы, вынуждая пользователей каждый раз возвращаться на исходную точку входа. Мы продемонстрируем разработанное решение, позволяющее сохранять текущий URL-адрес внутри фрейма и восстанавливать его после обновления, обеспечивая непрерывность работы пользователей и повышая удобство использования приложения.

Введение
Компания интегрирует дашборд BI-системы Insight через внешний фрейм, чтобы предоставлять аналитику для своих пользователей. После настройки системы пользователи столкнулись с проблемой: после перезагрузки страницы они вынуждены каждый раз возвращаться на главную страницу дашборда, что значительно замедляет их работу.

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

Проверка наличия доработки на контуре

Для проверки наличия и работоспособности функции сохранения состояния страницы следуйте этому алгоритму:

  1. Откройте панель разработчика в браузере (обычно через комбинацию клавиш Ctrl+Shift+I или Cmd+Opt+I на Mac).
  2. Перейдите на вкладку “Консоль” в панели разработчика.
  3. Вставьте следующий код в консоль и нажмите Enter:
window.addEventListener('message', function(event) {
  console.log('message', event);
});

Этот код регистрирует обработчик события message и выводит в консоль всю информацию о полученных сообщениях.

  1. Не закрывая консоль разработчика, перейдите на другую страницу внутри фрейма. В консоли должна появиться информация, содержащая URL-адрес страницы, на которую вы перешли внутри фрейма.
    image
    image780×711 164 KB

    Если вы увидели эту информацию в консоли, значит функция сохранения состояния страницы присутствует и работает корректно.

Настройка обработки событий изменения местоположения

Чтобы настроить обработку событий изменения местоположения внутри фрейма, необходимо передать следующий код разработчикам сайта, которые запускают приложение с BI-платформы Insight через внешний фрейм:

window.addEventListener('message', function({ data }) {
  const { name, details } = data;

  if (name === '@goodt/player/change-location') {
    // код для обработки изменения местоположения
    // с использованием свойства "details"
  }
});

В этом обработчике мы извлекаем свойства name и details из объекта data события. Затем мы проверяем, является ли значение name равным фильтру '@goodt/player/change-location'. Если это условие выполняется, значит, мы получили сообщение об изменении местоположения внутри фрейма. В этом случае можно использовать информацию из свойства details для сохранения текущего URL-адреса или выполнения других необходимых действий.

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

1 лайк