Integrering av rullgardinsdriven PDF URL-byte i Wix med hjälp av JavaScript-meddelanden

Förbättra PDF Viewer-funktionalitet på en Wix-bibliotekswebbplats

Att visa ett stort arkiv av PDF-filer på ett organiserat och användarvänligt sätt är avgörande för att förbättra användarupplevelsen på ett offentligt biblioteks webbplats. Målet är att erbjuda besökarna sömlös tillgång till historiska dokument som gamla tidningar, som lagras som PDF-filer. I det här projektet skapar användningen av Wix, Velo och ett HTML-inbäddningselement grunden för ett robust system.

Wix plattform stöder inbäddade element genom iframes, vilket gör att användare kan lägga till interaktiva komponenter som PDF-visare. Denna PDF-visare är inbäddad med en iframe, och för närvarande definierar en statisk URL vilket dokument som visas. Behovet av att dynamiskt ändra PDF-filen baserat på användarinmatning är dock avgörande för en smidig upplevelse.

Utmaningen är att tillåta användare att välja ett år och en månad från två rullgardinsmenyer, som sedan kommer att utlösa en ändring i PDF-dokumentet som visas. Detta innebär att man integrerar JavaScript-meddelanden för att kommunicera med iframe, vilket gör att URL:en för dokumentet kan ändras enligt rullgardinsvalen.

Detta tillvägagångssätt minskar inte bara behovet av många statiska Wix-sidor utan förenklar också åtkomsten till bibliotekets PDF-arkiv. Nedan utforskar vi stegen och lösningarna som behövs för att implementera detta med Velo-ramverket och JavaScript.

Dynamisk PDF-laddning med rullgardinsval i Wix

I den här lösningen använder vi ett par rullgardinselement på en Wix-sida för att dynamiskt ändra URL:en till en PDF-fil som visas i en inbäddad iFrame. Detta system är särskilt användbart för offentliga bibliotek som vill ge enkel åtkomst till arkiverade PDF-filer för tidningar. Kärnfunktionaliteten drivs av JavaScript-meddelanden, som skickar användarval från rullgardinsmenyn till den inbäddade PDF-visaren. PSPDFKit-visningsprogrammet används för att rendera PDF-filerna i iFrame, och vi manipulerar visningsprogrammet genom att ändra webbadressen baserat på användarens val av år och månad. Detta ger ett strömlinjeformat sätt att visa stora arkiv utan att skapa flera statiska Wix-sidor.

Den första rullgardinsmenyn väljer år och den andra rullgardinsmenyn väljer månad. När användaren väljer båda, konstruerar systemet lämplig URL för motsvarande PDF-fil. De PSPDFKit.load() Metoden är central för detta, eftersom den laddar den nya PDF-filen i iFrame baserat på den uppdaterade URL:en. Denna metod är en del av PSPDFKit-biblioteket, som är inbäddat på sidan genom ett externt skript. De postMessage() API är också avgörande i den alternativa lösningen, som möjliggör meddelanden mellan den överordnade sidan och iframen. Genom att skicka ett meddelande som innehåller den nya PDF-URL:n till iframe uppdateras PDF-visaren dynamiskt.

För att säkerställa att skriptet endast körs när DOM är fulladdat använder vi DOMContentLoaded händelse. Detta säkerställer att rullgardinselementen och PSPDFKit-behållaren är tillgängliga för skriptet. Vi lägger också till evenemangslyssnare i varje rullgardinsmeny. När användaren väljer ett år eller månad, fångar motsvarande händelseavlyssnare valet och anropar en funktion för att ladda om PDF-läsaren med rätt URL. Detta hanteras genom en enkel funktion som använder mall-literals för att konstruera URL:en från de valda värdena i rullgardinsmenyn. Denna metod är inte bara lätt att implementera utan också mycket modulär, vilket möjliggör enkla uppdateringar när nya arkiv läggs till.

I det andra tillvägagångssättet använder vi postMessage() för att kommunicera mellan den överordnade sidan och iFrame. Den överordnade sidan lyssnar efter ändringar i rullgardinsmenyn och skickar ett meddelande som innehåller den nya PDF-URL:n till iFrame, som tar emot meddelandet med en händelseavlyssnare. Den här metoden är användbar när man hanterar mer isolerade miljöer där iframen inte kan interagera direkt med den överordnade sidans DOM. Båda metoderna ger effektiva sätt att uppdatera innehållet i en inbäddad PDF-visare dynamiskt, vilket minskar behovet av flera statiska sidor och erbjuder en användarvänlig surfupplevelse.

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

Förbättra PDF-arkivtillgänglighet med Wix och JavaScript Messaging

En annan viktig faktor när du använder dropdown-element för att dynamiskt ändra en inbäddad PDF-URL i Wix är att säkerställa att interaktionen mellan iFrame och huvudsidan är effektiv. Medan JavaScript-meddelanden tillåter oss att skicka data mellan dessa två komponenter, kan prestandan och användarupplevelsen förbättras genom att optimera hur valet utlöser uppdateringar. Detta kan göras genom att avstudsa inmatningen, vilket innebär att systemet bara uppdaterar PDF-läsaren efter att användaren har slutfört sitt val, snarare än vid varje ändring.

En annan aspekt som inte har behandlats ännu är cross-origin resursdelning (CORS). Eftersom PDF-filerna finns på en extern server (som Digital Ocean), är det avgörande att se till att servern är konfigurerad för att tillåta åtkomst från Wix-domänen. Om serverns CORS-inställningar inte är korrekt konfigurerade kan det hända att PDF-läsaren inte kan läsa in dokumentet, vilket resulterar i fel. Korrekta CORS-rubriker på servern som är värd för PDF-filerna är avgörande för sömlös integration mellan de två plattformarna.

Dessutom kan du förbättra systemet genom att förinläsa PDF-filer som ofta används för att minska laddningstiderna. Förladdningsstrategier är användbara när användaren sannolikt byter mellan flera månader eller år. Genom att lagra dessa filer i webbläsarens cache, kommer efterföljande dokumentladdningar att gå snabbare, vilket ger en smidigare användarupplevelse. Detta kan göras med hjälp av servicearbetare eller andra cachningsmekanismer, som kan ställas in för att förladda PDF-filer när användaren navigerar genom de tillgängliga alternativen.