Integracja przełączania adresów URL PDF w oparciu o listę rozwijaną w Wix za pomocą przesyłania wiadomości JavaScript

Ulepszanie funkcjonalności przeglądarki plików PDF na stronie biblioteki Wix

Wyświetlanie obszernego archiwum plików PDF w zorganizowany i przyjazny dla użytkownika sposób ma kluczowe znaczenie dla poprawy komfortu korzystania ze strony internetowej biblioteki publicznej. Celem jest zapewnienie odwiedzającym bezproblemowego dostępu do zapisów historycznych, takich jak stare gazety, przechowywanych w formacie PDF. W tym projekcie użycie Wix, Velo i elementu HTML tworzy podstawę solidnego systemu.

Platforma Wix obsługuje osadzone elementy poprzez ramki iframe, umożliwiając użytkownikom dodawanie interaktywnych komponentów, takich jak przeglądarki plików PDF. Ta przeglądarka plików PDF jest osadzona przy użyciu ramki iframe, a obecnie statyczny adres URL określa, który dokument jest wyświetlany. Jednak potrzeba dynamicznej zmiany pliku PDF w oparciu o dane wprowadzone przez użytkownika jest niezbędna do płynnego działania.

Wyzwanie polega na umożliwieniu użytkownikom wybrania roku i miesiąca z dwóch menu, co następnie spowoduje zmianę w wyświetlanym dokumencie PDF. Obejmuje to integrację przesyłania wiadomości JavaScript w celu komunikacji z ramką iframe, umożliwiając zmianę adresu URL dokumentu zgodnie z wyborem z menu rozwijanego.

Takie podejście nie tylko zmniejsza potrzebę posiadania wielu statycznych stron Wix, ale także upraszcza dostęp do archiwum PDF biblioteki. Poniżej omawiamy kroki i rozwiązania potrzebne do wdrożenia tego przy użyciu frameworka Velo i JavaScript.

Dynamiczne ładowanie plików PDF z opcjami rozwijanymi w Wix

W tym rozwiązaniu używamy pary rozwijanych elementów na stronie Wix, aby dynamicznie modyfikować adres URL pliku PDF wyświetlanego w osadzonej ramce iFrame. System ten jest szczególnie przydatny dla bibliotek publicznych, które chcą zapewnić łatwy dostęp do zarchiwizowanych plików PDF gazet. Podstawowa funkcjonalność jest obsługiwana przez Wiadomości JavaScript, który wysyła wybory użytkownika z list rozwijanych do osadzonej przeglądarki plików PDF. Przeglądarka PSPDFKit służy do renderowania plików PDF w ramce iFrame, a my manipulujemy przeglądarką, zmieniając adres URL w oparciu o wybrany przez użytkownika rok i miesiąc. Zapewnia to usprawniony sposób udostępniania dużych archiwów bez tworzenia wielu statycznych stron Wix.

Pierwsze menu wybiera rok, drugie menu wybiera miesiąc. Gdy użytkownik wybierze oba, system konstruuje odpowiedni adres URL dla odpowiedniego pliku PDF. The PSPDKit.load() Metoda ma tu kluczowe znaczenie, ponieważ ładuje nowy plik PDF do ramki iFrame na podstawie zaktualizowanego adresu URL. Ta metoda jest częścią biblioteki PSPDFKit, która jest osadzana na stronie za pomocą zewnętrznego skryptu. The postWiadomość() API ma również kluczowe znaczenie w alternatywnym rozwiązaniu, które pozwala na komunikację pomiędzy stroną nadrzędną a ramką iframe. Wysyłając wiadomość zawierającą nowy adres URL pliku PDF do elementu iframe, przeglądarka plików PDF jest aktualizowana dynamicznie.

Aby mieć pewność, że skrypt będzie działał tylko wtedy, gdy DOM będzie w pełni załadowany, używamy metody DOMContentLoaded wydarzenie. Dzięki temu skrypt będzie miał dostęp do elementów listy rozwijanej i kontenera PSPDFKit. Do każdego menu dodajemy także detektory zdarzeń. Gdy użytkownik wybierze rok lub miesiąc, odpowiedni detektor zdarzeń przechwytuje wybór i wywołuje funkcję, która ponownie ładuje przeglądarkę PDF z poprawnym adresem URL. Robi się to za pomocą prostej funkcji, która wykorzystuje literały szablonu do konstruowania adresu URL na podstawie wartości wybranych z list rozwijanych. Ta metoda jest nie tylko łatwa do wdrożenia, ale także wysoce modułowa, co pozwala na łatwe aktualizacje w miarę dodawania nowych archiwów.

W drugim podejściu używamy postWiadomość() do komunikacji między stroną nadrzędną a ramką iFrame. Strona nadrzędna nasłuchuje zmian w menu rozwijanym i wysyła wiadomość zawierającą nowy adres URL pliku PDF do ramki iFrame, która odbiera wiadomość za pomocą detektora zdarzeń. Ta metoda jest przydatna w przypadku bardziej odizolowanych środowisk, w których element iframe nie może bezpośrednio wchodzić w interakcję z DOM strony nadrzędnej. Obie metody zapewniają skuteczne sposoby dynamicznej aktualizacji zawartości osadzonej przeglądarki plików PDF, redukując potrzebę tworzenia wielu statycznych stron i zapewniając przyjazne dla użytkownika przeglądanie.

// 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>

Zwiększanie dostępności archiwum PDF za pomocą wiadomości Wix i JavaScript

Kolejną ważną kwestią podczas używania elementów rozwijanych do dynamicznej modyfikacji osadzonego adresu URL pliku PDF w Wix jest zapewnienie, że interakcja pomiędzy iFramka a strona główna jest sprawna. Chociaż przesyłanie wiadomości JavaScript umożliwia nam przesyłanie danych między tymi dwoma składnikami, wydajność i wygodę użytkownika można poprawić, optymalizując sposób, w jaki wybór powoduje aktualizacje. Można tego dokonać poprzez wycofanie danych wejściowych, co oznacza, że ​​system aktualizuje przeglądarkę plików PDF dopiero po dokonaniu wyboru przez użytkownika, a nie po każdej zmianie.

Kolejnym aspektem, który nie został jeszcze omówiony, jest udostępnianie zasobów między źródłami (CORS). Ponieważ pliki PDF są hostowane na serwerze zewnętrznym (takim jak Digital Ocean), bardzo ważne jest, aby upewnić się, że serwer jest skonfigurowany tak, aby umożliwiał dostęp z domeny Wix. Jeśli ustawienia CORS serwera nie są poprawnie skonfigurowane, przeglądarka plików PDF może nie być w stanie załadować dokumentu, co powoduje błędy. Prawidłowe nagłówki CORS na serwerze hostującym pliki PDF są niezbędne do bezproblemowej integracji obu platform.

Dodatkowo możesz ulepszyć system, wstępnie ładując często używane pliki PDF, aby skrócić czas ładowania. Strategie wstępnego ładowania są przydatne, gdy użytkownik może przełączać się między wieloma miesiącami lub latami. Dzięki przechowywaniu tych plików w pamięci podręcznej przeglądarki kolejne ładowanie dokumentów będzie szybsze, co zapewni płynniejszą obsługę użytkownika. Można to zrobić za pomocą Service Workers lub innych mechanizmów buforowania, które można skonfigurować tak, aby wstępnie ładowały pliki PDF, gdy użytkownik porusza się po dostępnych opcjach.