Интеграция переключения URL-адресов PDF-файлов с помощью раскрывающегося списка в Wix с использованием обмена сообщениями JavaScript

Расширение функциональности средства просмотра PDF-файлов на сайте библиотеки Wix

Отображение обширного архива PDF-файлов в организованном и удобном для пользователя виде имеет решающее значение для улучшения пользовательского опыта на веб-сайте публичной библиотеки. Цель состоит в том, чтобы предложить посетителям беспрепятственный доступ к историческим записям, таким как старые газеты, которые хранятся в формате PDF. В этом проекте использование Wix, Velo и элемента встраивания HTML создает основу для надежной системы.

Платформа Wix поддерживает встроенные элементы через iframe, позволяя пользователям добавлять интерактивные компоненты, такие как программы просмотра PDF. Эта программа просмотра PDF-файлов встроена с помощью iframe, и в настоящее время статический URL-адрес определяет, какой документ отображается. Однако необходимость динамического изменения PDF-файла на основе пользовательского ввода необходима для бесперебойной работы.

Задача состоит в том, чтобы позволить пользователям выбирать год и месяц из двух раскрывающихся списков, что затем приведет к изменению отображаемого PDF-документа. Это предполагает интеграцию обмена сообщениями JavaScript для связи с iframe, позволяя URL-адресу документа изменяться в соответствии с вариантами раскрывающегося списка.

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

Динамическая загрузка PDF с раскрывающимся списком в Wix

В этом решении мы используем пару раскрывающихся элементов на странице Wix для динамического изменения URL-адреса PDF-файла, отображаемого во встроенном iFrame. Эта система особенно полезна для публичных библиотек, желающих обеспечить легкий доступ к архивным газетным PDF-файлам. Основная функциональность обеспечивается Обмен сообщениями JavaScript, который отправляет выбор пользователя из раскрывающегося списка во встроенную программу просмотра PDF-файлов. Средство просмотра PSPDFKit используется для рендеринга PDF-файлов внутри iFrame, и мы манипулируем средством просмотра, изменяя URL-адрес в зависимости от выбора пользователем года и месяца. Это обеспечивает упрощенный способ работы с большими архивами без создания нескольких статических страниц Wix.

В первом раскрывающемся списке выбирается год, а во втором раскрывающемся списке — месяц. Когда пользователь выбирает оба варианта, система создает соответствующий URL-адрес для соответствующего файла PDF. PSDFKit.load() Этот метод играет центральную роль в этом, поскольку он загружает новый PDF-файл в iFrame на основе обновленного URL-адреса. Этот метод является частью библиотеки PSDFKit, которая внедряется на страницу посредством внешнего скрипта. постСообщение() API также имеет решающее значение в альтернативном решении, которое позволяет обмениваться сообщениями между родительской страницей и iframe. При отправке сообщения, содержащего новый URL-адрес PDF-файла, в iframe средство просмотра PDF-файлов обновляется динамически.

Чтобы гарантировать, что скрипт запускается только тогда, когда DOM полностью загружен, мы используем DOMContentЗагружено событие. Это гарантирует, что элементы раскрывающегося списка и контейнер PSDFKit будут доступны сценарию. Мы также добавляем прослушиватели событий в каждый раскрывающийся список. Когда пользователь выбирает год или месяц, соответствующий прослушиватель событий фиксирует выбор и вызывает функцию для перезагрузки средства просмотра PDF с правильным URL-адресом. Это решается с помощью простой функции, которая использует литералы шаблона для создания URL-адреса из выбранных значений в раскрывающихся списках. Этот метод не только прост в реализации, но и обладает высокой степенью модульности, что позволяет легко обновлять его по мере добавления новых архивов.

Во втором подходе мы используем постСообщение() для связи между родительской страницей и iFrame. Родительская страница прослушивает изменения раскрывающегося списка и отправляет сообщение, содержащее новый URL-адрес PDF, в iFrame, который получает сообщение с помощью прослушивателя событий. Этот метод полезен при работе с более изолированными средами, где iframe не может напрямую взаимодействовать с DOM родительской страницы. Оба метода обеспечивают эффективные способы динамического обновления содержимого встроенной программы просмотра PDF-файлов, уменьшая потребность в нескольких статических страницах и предлагая удобный просмотр.

// HTML structure for the dropdowns and embed element
<div>
  <label for="yearSelect">Select Year:</label>
  <select id="yearSelect">
    <option value="">--Year--</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <!-- Add other years dynamically or manually -->
  </select>
  <label for="monthSelect">Select Month:</label>
  <select id="monthSelect">
    <option value="">--Month--</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <!-- Add other months dynamically or manually -->
  </select>
</div>
// Embedded PDF viewer in iframe
<div id="pspdfkit" style="width: 100%; height: 100%; max-width: 1920px;"></div>
<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@2024.5.2/pspdfkit.js"></script>
// JavaScript to update URL based on dropdown selection
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  function loadPDF(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      PSPDFKit.load({
        container: "#pspdfkit",
        document: url,
      }).catch((error) => {
        console.error("Failed to load PDF:", error);
      });
    }
  }
  yearSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
});
</script>

// HTML structure remains the same for dropdowns
// Here, we use iframe with a postMessage-based communication system
<iframe id="pdfViewer" src="about:blank" style="width: 100%; height: 100%;"></iframe>
// JavaScript for sending messages to iframe
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  const iframe = document.getElementById("pdfViewer");
  function updatePDFViewer(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      iframe.contentWindow.postMessage({
        type: "updatePDF",
        url: url
      }, "*");
    }
  }
  yearSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
});
</script>
// Inside iframe, use this script to receive the message
<script>
window.addEventListener("message", (event) => {
  if (event.data.type === "updatePDF" && event.data.url) {
    PSPDFKit.load({
      container: "#pspdfkit",
      document: event.data.url,
    });
  }
});
</script>

Улучшение доступности PDF-архива с помощью Wix и обмена сообщениями JavaScript

Еще одним важным моментом при использовании раскрывающихся элементов для динамического изменения URL-адреса встроенного PDF-файла в Wix является обеспечение того, чтобы взаимодействие между iFrame и главная страница эффективна. Хотя обмен сообщениями JavaScript позволяет нам передавать данные между этими двумя компонентами, производительность и удобство использования можно улучшить за счет оптимизации того, как выбор запускает обновления. Это можно сделать путем устранения дребезга ввода. Это означает, что система обновляет средство просмотра PDF-файлов только после того, как пользователь завершил свой выбор, а не при каждом изменении.

Еще один аспект, который еще не был рассмотрен, — это совместное использование ресурсов между источниками (CORS). Поскольку PDF-файлы размещаются на внешнем сервере (например, Digital Ocean), крайне важно убедиться, что сервер настроен на разрешение доступа из домена Wix. Если параметры CORS сервера настроены неправильно, средство просмотра PDF-файлов не сможет загрузить документ, что приведет к ошибкам. Правильные заголовки CORS на сервере, на котором размещены файлы PDF, необходимы для плавной интеграции между двумя платформами.

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