Інтеграція перемикання URL-адрес PDF на основі випадаючого меню у Wix за допомогою обміну повідомленнями JavaScript

Покращення функціональності PDF Viewer на сайті бібліотеки 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. The PSPDFKit.load() Метод є центральним у цьому, оскільки він завантажує новий PDF-файл в iFrame на основі оновленої URL-адреси. Цей метод є частиною бібліотеки PSPDFKit, яка вбудована на сторінку через зовнішній сценарій. The postMessage() API також має вирішальне значення в альтернативному рішенні, яке дозволяє обмінюватися повідомленнями між батьківською сторінкою та iframe. Надсилаючи повідомлення, що містить URL-адресу нового PDF-файлу, до iframe, засіб перегляду PDF-файлів динамічно оновлюється.

Щоб переконатися, що сценарій запускається лише тоді, коли DOM повністю завантажено, ми використовуємо DOMContentLoaded подія. Це гарантує, що елементи спадного меню та контейнер PSPDFKit доступні для сценарію. Ми також додаємо слухачі подій до кожного спадного списку. Коли користувач вибирає рік або місяць, відповідний прослуховувач подій фіксує вибір і викликає функцію для перезавантаження програми перегляду PDF із правильною URL-адресою. Це обробляється за допомогою простої функції, яка використовує літерали шаблону для створення URL-адреси з вибраних значень у розкривних меню. Цей метод не тільки простий у реалізації, але й дуже модульний, що дозволяє легко оновлювати, коли додаються нові архіви.

У другому підході ми використовуємо postMessage() для зв’язку між батьківською сторінкою та 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-файлів під час навігації користувачем доступними параметрами.