Integration af dropdown-drevet PDF URL-skift i Wix ved hjælp af JavaScript-meddelelser

Forbedring af PDF Viewer-funktionalitet på et Wix-bibliotekswebsted

At vise et stort arkiv af PDF-filer på en organiseret og brugervenlig måde er afgørende for at forbedre brugeroplevelsen på et offentligt biblioteks websted. Målet er at tilbyde besøgende problemfri adgang til historiske optegnelser som gamle aviser, der gemmes som PDF-filer. I dette projekt skaber brugen af ​​Wix, Velo og et HTML-indlejringselement grundlaget for et robust system.

Wix's platform understøtter indlejrede elementer gennem iframes, hvilket giver brugerne mulighed for at tilføje interaktive komponenter som PDF-fremvisere. Denne PDF-fremviser er indlejret ved hjælp af en iframe, og i øjeblikket definerer en statisk URL, hvilket dokument der vises. Behovet for dynamisk at ændre PDF-filen baseret på brugerinput er imidlertid afgørende for en jævn oplevelse.

Udfordringen er at give brugerne mulighed for at vælge et år og en måned fra to rullemenuer, som derefter vil udløse en ændring i det viste PDF-dokument. Dette indebærer at integrere JavaScript-meddelelser for at kommunikere med iframen, hvilket gør det muligt for dokumentets URL at ændre sig i henhold til dropdown-valgene.

Denne tilgang reducerer ikke kun behovet for adskillige statiske Wix-sider, men forenkler også adgangen til bibliotekets PDF-arkiv. Nedenfor udforsker vi de nødvendige trin og løsninger for at implementere dette ved hjælp af Velo-rammeværket og JavaScript.

Kommando	Eksempel på brug
PSPDFKit.load()	Denne metode initialiserer PSPDFKit PDF-fremviseren inde i en bestemt beholder. Den indlæser en PDF-fil fra den angivne URL, hvilket gør den synlig i indlejringselementet. Det er specifikt for PSPDFKits JavaScript-bibliotek, som er skræddersyet til indlejring og visning af PDF-dokumenter.
postMessage()	Bruges til at kommunikere mellem det overordnede vindue og en indlejret iframe. I denne sammenhæng sender den en besked fra hovedsiden til iframen, så iframen kan opdatere sit indhold (PDF-URL'en) baseret på dropdown-valg.
window.addEventListener("message")	Denne begivenhedslytter tilføjes inde i iframen for at lytte efter beskeder sendt via postMessage(). Den behandler beskeden for dynamisk at indlæse et nyt PDF-dokument i iframen baseret på de modtagne data.
event.data	I meddelelseshændelseshandleren indeholder event.data de data, der sendes fra det overordnede vindue. I dette tilfælde inkluderer den URL'en på den valgte PDF-fil, der skal indlæses i PSPDFKit-fremviseren.
document.getElementById()	Denne DOM-manipulationsmetode henter et HTML-element ved dets ID. Det bruges til at fange brugerinput fra dropdown-elementerne, så scriptet kan bestemme det valgte år og måned for PDF-URL-opdateringen.
DOMContentLoaded	En hændelse, der sikrer, at JavaScript'et kun udføres, efter at DOM'et er blevet fuldt indlæst. Dette forhindrer fejl, når du forsøger at få adgang til DOM-elementer, før de eksisterer.
addEventListener("change")	Denne hændelseslytter overvåger dropdown-elementerne for eventuelle ændringer. Når en bruger vælger et andet år eller måned, udløses funktionen for at opdatere PDF-URL'en og indlæse det tilsvarende dokument.
template literals	Skabelonliterals (omsluttet af backticks) tillader indlejring af variabler i strenge, hvilket gør det nemt dynamisk at generere URL'en til den valgte PDF. For eksempel: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	I PSPDFKit-initialiseringen angiver container HTML-elementet (ved ID), hvor PDF-fremviseren skal gengives. Dette er vigtigt for at definere, hvor PDF'en skal vises på siden.

Dynamisk PDF-indlæsning med dropdown-valg i Wix

I denne løsning bruger vi et par dropdown-elementer på en Wix-side til dynamisk at ændre URL'en på en PDF-fil, der vises i en indlejret iFrame. Dette system er især nyttigt for offentlige biblioteker, der ønsker at give nem adgang til arkiverede avis-PDF'er. Kernefunktionaliteten er drevet af , som sender brugervalg fra rullemenuerne til den indlejrede PDF-fremviser. PSPDFKit-fremviseren bruges til at gengive PDF'erne inde i iFrame, og vi manipulerer fremviseren ved at ændre URL'en baseret på brugerens valg af år og måned. Dette giver en strømlinet måde at vise store arkiver på uden at oprette flere statiske Wix-sider.

Den første dropdown vælger året, og den anden dropdown vælger måneden. Når brugeren vælger begge, konstruerer systemet den passende URL til den tilsvarende PDF-fil. De metoden er central for dette, da den indlæser den nye PDF i iFrame baseret på den opdaterede URL. Denne metode er en del af PSPDFKit-biblioteket, som er indlejret på siden gennem et eksternt script. De API er også kritisk i den alternative løsning, som giver mulighed for beskeder mellem den overordnede side og iframen. Ved at sende en besked, der indeholder den nye PDF-URL, til iframen, opdateres PDF-fremviseren dynamisk.

For at sikre, at scriptet kun kører, når DOM'en er fuldt indlæst, bruger vi tilfælde. Dette sikrer, at dropdown-elementerne og PSPDFKit-beholderen er tilgængelige for scriptet. Vi tilføjer også begivenhedslyttere til hver dropdown. Når brugeren vælger et år eller en måned, fanger den tilsvarende begivenhedslytter valget og kalder en funktion for at genindlæse PDF-fremviseren med den korrekte URL. Dette håndteres gennem en simpel funktion, der bruger skabelonliterals til at konstruere URL'en ud fra de valgte værdier i rullemenuerne. Denne metode er ikke kun nem at implementere, men også meget modulær, hvilket giver mulighed for nemme opdateringer, efterhånden som nye arkiver tilføjes.

I den anden tilgang bruger vi at kommunikere mellem den overordnede side og iFrame. Den overordnede side lytter efter ændringer i rullemenuen og sender en besked indeholdende den nye PDF-URL til iFrame, som modtager beskeden ved hjælp af en hændelseslytter. Denne metode er nyttig, når man har at gøre med mere isolerede miljøer, hvor iframen ikke kan interagere direkte med den overordnede sides DOM. Begge metoder giver effektive måder til dynamisk at opdatere indholdet af en indlejret PDF-fremviser, hvilket reducerer behovet for flere statiske sider og tilbyder en brugervenlig browsingoplevelse.

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

Forbedring af PDF-arkivtilgængelighed med Wix og JavaScript Messaging

En anden vigtig overvejelse, når du bruger dropdown-elementer til dynamisk at ændre en indlejret PDF-URL i Wix, er at sikre, at interaktionen mellem og hovedsiden er effektiv. Mens JavaScript-meddelelser giver os mulighed for at sende data mellem disse to komponenter, kan ydeevnen og brugeroplevelsen forbedres ved at optimere, hvordan valget udløser opdateringer. Dette kan gøres ved at debouncing inputtet, hvilket betyder, at systemet først opdaterer PDF-fremviseren, efter at brugeren har gennemført sit valg, snarere end ved hver ændring.

Et andet aspekt, der ikke er blevet dækket endnu, er . Da PDF'erne er hostet på en ekstern server (såsom Digital Ocean), er det afgørende at sikre, at serveren er konfigureret til at tillade adgang fra Wix-domænet. Hvis serverens CORS-indstillinger ikke er konfigureret korrekt, kan PDF-fremviseren muligvis ikke indlæse dokumentet, hvilket resulterer i fejl. Korrekte CORS-headere på serveren, der hoster PDF-filerne, er afgørende for problemfri integration mellem de to platforme.

Derudover kan du forbedre systemet ved at forudindlæse ofte åbnede PDF-filer for at reducere indlæsningstiden. Forudindlæsningsstrategier er nyttige, når brugeren sandsynligvis vil skifte mellem flere måneder eller år. Ved at gemme disse filer i browserens cache vil efterfølgende dokumentindlæsninger være hurtigere, hvilket giver en mere jævn brugeroplevelse. Dette kan gøres ved hjælp af servicearbejdere eller andre cachemekanismer, som kan sættes op til at forudindlæse PDF'er, når brugeren navigerer gennem de tilgængelige muligheder.

1. Hvordan tilføjer jeg dropdown-vælgerne i Wix?
2. Du kan tilføje dropdown-elementer ved hjælp af Wix-editoren og bruge JavaScript til at styre dem ved at tildele unikke id'er. Dropdown-elementerne vil udløse ændringer i PDF-URL'en igennem .
3. Hvad gør kommando gøre?
4. De metoden er ansvarlig for at gengive PDF-fremviseren og indlæse en specifik PDF-fil i den. Denne metode er en del af PSPDFKit-biblioteket, der bruges til at vise PDF-filer dynamisk.
5. Kan jeg bruge for kommunikation på tværs af oprindelse?
6. Ja, den API er specielt designet til at kommunikere mellem forskellige oprindelser, såsom mellem en overordnet side og en iFrame, hvilket er afgørende for denne implementering.
7. Hvordan håndterer jeg fejl ved indlæsning af en PDF?
8. Du kan håndtere fejl ved at tilføje en blok til funktion til at fange eventuelle fejl, der opstår under indlæsningsprocessen og vise en passende fejlmeddelelse.
9. Skal jeg konfigurere min server til CORS?
10. Ja, hvis dine PDF'er er hostet på et andet domæne, skal du sikre dig, at serveren er sat op med korrekt headers for at give Wix-webstedet adgang til dokumenterne.

Denne løsning forenkler processen med at vise store arkiver af PDF-filer på en enkelt side. Ved at bruge to dropdown-elementer til at vælge år og måned, kan vi dynamisk opdatere PDF-fremviseren uden at oprette flere Wix-sider.

Ved at kombinere fleksibiliteten i Velo-rammeværket med JavaScript-meddelelser mellem dropdowns og iFrame giver denne metode en effektiv måde at organisere og præsentere historiske data på. Det er både skalerbart og brugervenligt til offentlige websteder som biblioteksarkiver.