Integration der Dropdown-gesteuerten PDF-URL-Umschaltung in Wix mithilfe von JavaScript-Nachrichten

Verbesserung der PDF-Viewer-Funktionalität auf einer Bibliotheksseite von Wix

Die organisierte und benutzerfreundliche Anzeige eines umfangreichen Archivs von PDF-Dateien ist entscheidend für die Verbesserung des Benutzererlebnisses auf der Website einer öffentlichen Bibliothek. Ziel ist es, Besuchern einen nahtlosen Zugang zu historischen Aufzeichnungen wie alten Zeitungen zu bieten, die als PDFs gespeichert sind. In diesem Projekt schafft die Verwendung von Wix, Velo und einem HTML-Einbettungselement die Grundlage für ein robustes System.

Die Plattform von Wix unterstützt eingebettete Elemente über Iframes, sodass Benutzer interaktive Komponenten wie PDF-Viewer hinzufügen können. Dieser PDF-Viewer wird mithilfe eines Iframes eingebettet. Derzeit definiert eine statische URL, welches Dokument angezeigt wird. Für ein reibungsloses Erlebnis ist jedoch die Notwendigkeit erforderlich, die PDF-Datei basierend auf Benutzereingaben dynamisch zu ändern.

Die Herausforderung besteht darin, Benutzern die Auswahl eines Jahres und eines Monats aus zwei Dropdown-Menüs zu ermöglichen, was dann eine Änderung im angezeigten PDF-Dokument auslöst. Dazu gehört die Integration von JavaScript-Nachrichten zur Kommunikation mit dem Iframe, sodass sich die URL des Dokuments entsprechend der Dropdown-Auswahl ändern kann.

Dieser Ansatz reduziert nicht nur die Notwendigkeit zahlreicher statischer Wix-Seiten, sondern vereinfacht auch den Zugriff auf das PDF-Archiv der Bibliothek. Im Folgenden untersuchen wir die Schritte und Lösungen, die zur Implementierung mithilfe des Velo-Frameworks und JavaScript erforderlich sind.

Befehl	Anwendungsbeispiel
PSPDFKit.load()	Diese Methode initialisiert den PSPDFKit-PDF-Viewer in einem bestimmten Container. Es lädt eine PDF-Datei von der angegebenen URL und macht sie im Einbettungselement sichtbar. Es ist spezifisch für die JavaScript-Bibliothek von PSPDFKit, die auf das Einbetten und Anzeigen von PDF-Dokumenten zugeschnitten ist.
postMessage()	Wird zur Kommunikation zwischen dem übergeordneten Fenster und einem eingebetteten Iframe verwendet. In diesem Zusammenhang sendet es eine Nachricht von der Hauptseite an den Iframe, sodass der Iframe seinen Inhalt (die PDF-URL) basierend auf Dropdown-Auswahlen aktualisieren kann.
window.addEventListener("message")	Dieser Ereignis-Listener wird innerhalb des Iframes hinzugefügt, um auf Nachrichten zu warten, die über postMessage() gesendet werden. Es verarbeitet die Nachricht, um basierend auf den empfangenen Daten dynamisch ein neues PDF-Dokument in den Iframe zu laden.
event.data	Innerhalb des Nachrichtenereignishandlers enthält event.data die vom übergeordneten Fenster gesendeten Daten. In diesem Fall enthält es die URL der ausgewählten PDF-Datei, die in den PSPDFKit-Viewer geladen werden soll.
document.getElementById()	Diese DOM-Manipulationsmethode ruft ein HTML-Element anhand seiner ID ab. Es wird verwendet, um Benutzereingaben aus den Dropdown-Elementen zu erfassen, sodass das Skript das ausgewählte Jahr und den ausgewählten Monat für die PDF-URL-Aktualisierung bestimmen kann.
DOMContentLoaded	Ein Ereignis, das sicherstellt, dass das JavaScript erst ausgeführt wird, nachdem das DOM vollständig geladen wurde. Dies verhindert Fehler beim Versuch, auf DOM-Elemente zuzugreifen, bevor diese existieren.
addEventListener("change")	Dieser Ereignis-Listener überwacht die Dropdown-Elemente auf Änderungen. Wenn ein Benutzer ein anderes Jahr oder einen anderen Monat auswählt, wird die Funktion ausgelöst, um die PDF-URL zu aktualisieren und das entsprechende Dokument zu laden.
template literals	Vorlagenliterale (umschlossen von Backticks) ermöglichen das Einbetten von Variablen in Zeichenfolgen und erleichtern so die dynamische Generierung der URL für das ausgewählte PDF. Zum Beispiel: „https://domain.tld/${Jahr}_${Monat}_etc.pdf“.
container: "#pspdfkit"	Bei der PSPDFKit-Initialisierung gibt der Container das HTML-Element (nach ID) an, in dem der PDF-Viewer gerendert wird. Dies ist wichtig, um zu definieren, wo das PDF auf der Seite angezeigt wird.

Dynamisches Laden von PDFs mit Dropdown-Auswahl in Wix

In dieser Lösung verwenden wir ein Paar Dropdown-Elemente auf einer Wix-Seite, um die URL einer PDF-Datei, die in einem eingebetteten iFrame angezeigt wird, dynamisch zu ändern. Dieses System ist besonders nützlich für öffentliche Bibliotheken, die einen einfachen Zugriff auf archivierte Zeitungs-PDFs ermöglichen möchten. Die Kernfunktionalität wird von unterstützt , das Benutzerauswahlen aus den Dropdown-Listen an den eingebetteten PDF-Viewer sendet. Der PSPDFKit-Viewer wird zum Rendern der PDFs im iFrame verwendet. Wir manipulieren den Viewer, indem wir die URL basierend auf der vom Benutzer gewählten Jahres- und Monatsauswahl ändern. Dies bietet eine optimierte Möglichkeit, große Archive anzuzeigen, ohne mehrere statische Wix-Seiten zu erstellen.

Das erste Dropdown-Menü wählt das Jahr aus und das zweite Dropdown-Menü wählt den Monat aus. Wenn der Benutzer beides auswählt, erstellt das System die entsprechende URL für die entsprechende PDF-Datei. Der Die Methode ist dabei von zentraler Bedeutung, da sie das neue PDF basierend auf der aktualisierten URL in den iFrame lädt. Diese Methode ist Teil der PSPDFKit-Bibliothek, die über ein externes Skript in die Seite eingebettet wird. Der Auch bei der alternativen Lösung ist die API von entscheidender Bedeutung, da sie die Nachrichtenübermittlung zwischen der übergeordneten Seite und dem Iframe ermöglicht. Durch das Senden einer Nachricht mit der neuen PDF-URL an den Iframe wird der PDF-Viewer dynamisch aktualisiert.

Um sicherzustellen, dass das Skript nur ausgeführt wird, wenn das DOM vollständig geladen ist, verwenden wir das Ereignis. Dadurch wird sichergestellt, dass das Skript auf die Dropdown-Elemente und den PSPDFKit-Container zugreifen kann. Wir fügen jedem Dropdown auch Ereignis-Listener hinzu. Wenn der Benutzer ein Jahr oder einen Monat auswählt, erfasst der entsprechende Ereignis-Listener die Auswahl und ruft eine Funktion auf, um den PDF-Viewer mit der richtigen URL neu zu laden. Dies wird durch eine einfache Funktion gehandhabt, die Vorlagenliterale verwendet, um die URL aus den ausgewählten Werten in den Dropdowns zu erstellen. Diese Methode ist nicht nur einfach zu implementieren, sondern auch hochmodular und ermöglicht einfache Aktualisierungen, wenn neue Archive hinzugefügt werden.

Im zweiten Ansatz verwenden wir zur Kommunikation zwischen der übergeordneten Seite und dem iFrame. Die übergeordnete Seite wartet auf Dropdown-Änderungen und sendet eine Nachricht mit der neuen PDF-URL an den iFrame, der die Nachricht mithilfe eines Ereignis-Listeners empfängt. Diese Methode ist nützlich, wenn es um isoliertere Umgebungen geht, in denen der Iframe nicht direkt mit dem DOM der übergeordneten Seite interagieren kann. Beide Methoden bieten effiziente Möglichkeiten, den Inhalt eines eingebetteten PDF-Viewers dynamisch zu aktualisieren, wodurch die Notwendigkeit mehrerer statischer Seiten reduziert wird und ein benutzerfreundliches Browsing-Erlebnis geboten wird.

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

Verbesserung der Zugänglichkeit von PDF-Archiven mit Wix und JavaScript Messaging

Eine weitere wichtige Überlegung bei der Verwendung von Dropdown-Elementen zum dynamischen Ändern einer eingebetteten PDF-URL in Wix besteht darin, sicherzustellen, dass die Interaktion zwischen den und die Hauptseite ist effizient. Während JavaScript-Messaging es uns ermöglicht, Daten zwischen diesen beiden Komponenten zu senden, können die Leistung und das Benutzererlebnis verbessert werden, indem die Art und Weise optimiert wird, wie die Auswahl Aktualisierungen auslöst. Dies kann durch Entprellen der Eingabe erreicht werden, was bedeutet, dass das System den PDF-Viewer erst aktualisiert, nachdem der Benutzer seine Auswahl abgeschlossen hat, und nicht bei jeder Änderung.

Ein weiterer Aspekt, der noch nicht behandelt wurde, ist . Da die PDFs auf einem externen Server (z. B. Digital Ocean) gehostet werden, ist es wichtig sicherzustellen, dass der Server so konfiguriert ist, dass er den Zugriff von der Wix-Domäne aus zulässt. Wenn die CORS-Einstellungen des Servers nicht korrekt konfiguriert sind, kann der PDF-Viewer das Dokument möglicherweise nicht laden, was zu Fehlern führt. Richtige CORS-Header auf dem Server, der die PDF-Dateien hostet, sind für die nahtlose Integration zwischen den beiden Plattformen unerlässlich.

Darüber hinaus können Sie das System erweitern, indem Sie häufig aufgerufene PDF-Dateien vorab laden, um die Ladezeiten zu verkürzen. Vorladestrategien sind nützlich, wenn der Benutzer voraussichtlich zwischen mehreren Monaten oder Jahren wechseln wird. Durch das Speichern dieser Dateien im Cache des Browsers werden nachfolgende Dokumentladevorgänge beschleunigt, was für ein reibungsloseres Benutzererlebnis sorgt. Dies kann mithilfe von Servicemitarbeitern oder anderen Caching-Mechanismen erfolgen, die so eingerichtet werden können, dass PDFs vorab geladen werden, während der Benutzer durch die verfügbaren Optionen navigiert.

1. Wie füge ich die Dropdown-Auswahl in Wix hinzu?
2. Sie können Dropdown-Elemente mit dem Wix-Editor hinzufügen und sie mit JavaScript steuern, indem Sie eindeutige IDs zuweisen. Die Dropdown-Elemente lösen Änderungen in der PDF-URL aus .
3. Was bedeutet das Befehl tun?
4. Der Die Methode ist für das Rendern des PDF-Viewers und das Laden einer bestimmten PDF-Datei in diesen verantwortlich. Diese Methode ist Teil der PSPDFKit-Bibliothek, die zur dynamischen Anzeige von PDF-Dateien verwendet wird.
5. Kann ich verwenden für die herkunftsübergreifende Kommunikation?
6. Ja, das Die API ist speziell für die Kommunikation zwischen verschiedenen Ursprüngen konzipiert, beispielsweise zwischen einer übergeordneten Seite und einem iFrame, was für diese Implementierung von entscheidender Bedeutung ist.
7. Wie gehe ich mit Fehlern beim Laden einer PDF um?
8. Sie können Fehler behandeln, indem Sie a hinzufügen Block zum Funktion, um eventuelle Fehler, die während des Ladevorgangs auftreten, abzufangen und eine entsprechende Fehlermeldung anzuzeigen.
9. Muss ich meinen Server für CORS konfigurieren?
10. Ja, wenn Ihre PDFs auf einer anderen Domain gehostet werden, müssen Sie sicherstellen, dass der Server ordnungsgemäß eingerichtet ist Header, um der Website von Wix den Zugriff auf die Dokumente zu ermöglichen.

Diese Lösung vereinfacht die Anzeige großer Archive von PDF-Dateien auf einer einzigen Seite. Durch die Verwendung von zwei Dropdown-Elementen zur Auswahl von Jahr und Monat können wir den PDF-Viewer dynamisch aktualisieren, ohne mehrere Wix-Seiten zu erstellen.

Durch die Kombination der Flexibilität des Velo-Frameworks mit JavaScript-Nachrichten zwischen Dropdowns und dem iFrame bietet diese Methode eine effiziente Möglichkeit, historische Daten zu organisieren und darzustellen. Es ist sowohl skalierbar als auch benutzerfreundlich für öffentlich zugängliche Websites wie Bibliotheksarchive.