Integrering av dropdown-drevet PDF URL-bytte i Wix ved hjelp av JavaScript-meldinger

Forbedring av PDF Viewer-funksjonalitet på en Wix-bibliotekside

Å vise et stort arkiv av PDF-filer på en organisert og brukervennlig måte er avgjørende for å forbedre brukeropplevelsen på et offentlig biblioteks nettsted. Målet er å tilby besøkende sømløs tilgang til historiske poster som gamle aviser, som lagres som PDF-filer. I dette prosjektet danner bruken av Wix, Velo og et HTML-embed-element grunnlaget for et robust system.

Wix sin plattform støtter innebygde elementer gjennom iframes, slik at brukere kan legge til interaktive komponenter som PDF-visere. Denne PDF-visningen er innebygd ved hjelp av en iframe, og for øyeblikket definerer en statisk URL hvilket dokument som vises. Behovet for å dynamisk endre PDF-filen basert på brukerinndata er imidlertid avgjørende for en jevn opplevelse.

Utfordringen er å la brukere velge et år og en måned fra to rullegardinmenyene, som deretter vil utløse en endring i PDF-dokumentet som vises. Dette innebærer å integrere JavaScript-meldinger for å kommunisere med iframe, slik at URL-en til dokumentet kan endres i henhold til rullegardinvalgene.

Denne tilnærmingen reduserer ikke bare behovet for en rekke statiske Wix-sider, men forenkler også tilgangen til bibliotekets PDF-arkiv. Nedenfor utforsker vi trinnene og løsningene som trengs for å implementere dette ved hjelp av Velo-rammeverket og JavaScript.

Kommando	Eksempel på bruk
PSPDFKit.load()	Denne metoden initialiserer PSPDFKit PDF-visningsprogrammet inne i en bestemt beholder. Den laster en PDF-fil fra den oppgitte URL-en, noe som gjør den synlig i det innebygde elementet. Det er spesifikt for PSPDFKits JavaScript-bibliotek, som er skreddersydd for å bygge inn og vise PDF-dokumenter.
postMessage()	Brukes til å kommunisere mellom det overordnede vinduet og en innebygd iframe. I denne sammenhengen sender den en melding fra hovedsiden til iframen, slik at iframen kan oppdatere innholdet (PDF-URLen) basert på rullegardinvalg.
window.addEventListener("message")	Denne hendelseslytteren legges til i iframen for å lytte etter meldinger sendt via postMessage(). Den behandler meldingen for å dynamisk laste et nytt PDF-dokument i iframe basert på dataene som er mottatt.
event.data	Innenfor meldingshendelsesbehandleren inneholder event.data dataene sendt fra det overordnede vinduet. I dette tilfellet inkluderer den URL-en til den valgte PDF-filen som skal lastes inn i PSPDFKit-visningsprogrammet.
document.getElementById()	Denne DOM-manipulasjonsmetoden henter et HTML-element ved sin ID. Den brukes til å fange brukerinndata fra rullegardinelementene, slik at skriptet kan bestemme det valgte året og måneden for PDF-URL-oppdateringen.
DOMContentLoaded	En hendelse som sikrer at JavaScript kjøres først etter at DOM-en er fulllastet. Dette forhindrer feil når du prøver å få tilgang til DOM-elementer før de eksisterer.
addEventListener("change")	Denne hendelseslytteren overvåker rullegardinelementene for eventuelle endringer. Når en bruker velger et annet år eller måned, utløses funksjonen for å oppdatere PDF-URLen og laste inn det tilsvarende dokumentet.
template literals	Mal-literals (omsluttet av backticks) tillater å bygge inn variabler i strenger, noe som gjør det enkelt å dynamisk generere URL-en for den valgte PDF-filen. For eksempel: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	I PSPDFKit-initialiseringen spesifiserer container HTML-elementet (etter ID) der PDF-visningsprogrammet skal gjengis. Dette er viktig for å definere hvor PDF-en skal vises på siden.

Dynamisk PDF-lasting med rullegardinvalg i Wix

I denne løsningen bruker vi et par rullegardinelementer på en Wix-side for dynamisk å endre URL-en til en PDF-fil som vises i en innebygd iFrame. Dette systemet er spesielt nyttig for offentlige biblioteker som ønsker å gi enkel tilgang til arkiverte avis-PDF-filer. Kjernefunksjonaliteten drives av , som sender brukervalg fra rullegardinmenyene til den innebygde PDF-visningen. PSPDFKit-visningsprogrammet brukes til å gjengi PDF-ene inne i iFrame, og vi manipulerer visningsprogrammet ved å endre URL-en basert på brukerens valg av år og måned. Dette gir en strømlinjeformet måte å vise store arkiver uten å lage flere statiske Wix-sider.

Den første rullegardinmenyen velger året, og den andre rullegardinlisten velger måneden. Når brukeren velger begge, konstruerer systemet riktig URL for den tilsvarende PDF-filen. De metoden er sentral i dette, siden den laster den nye PDF-filen inn i iFrame basert på den oppdaterte URL-en. Denne metoden er en del av PSPDFKit-biblioteket, som er innebygd på siden gjennom et eksternt skript. De API er også kritisk i den alternative løsningen, som gir mulighet for meldinger mellom overordnet side og iframe. Ved å sende en melding som inneholder den nye PDF-URLen til iframe, oppdateres PDF-visningen dynamisk.

For å sikre at skriptet kjører kun når DOM-en er fullastet, bruker vi hendelse. Dette sikrer at rullegardinelementene og PSPDFKit-beholderen er tilgjengelige for skriptet. Vi legger også til arrangementslyttere i hver rullegardin. Når brukeren velger et år eller en måned, fanger den korresponderende hendelseslytteren opp valget og kaller opp en funksjon for å laste PDF-leseren på nytt med riktig URL. Dette håndteres gjennom en enkel funksjon som bruker bokstavmaler for å konstruere URL-en fra de valgte verdiene i rullegardinlistene. Denne metoden er ikke bare enkel å implementere, men også svært modulær, noe som muliggjør enkle oppdateringer etter hvert som nye arkiver legges til.

I den andre tilnærmingen bruker vi for å kommunisere mellom overordnet side og iFrame. Den overordnede siden lytter etter endringer i rullegardinmenyen og sender en melding som inneholder den nye PDF-URLen til iFrame, som mottar meldingen ved hjelp av en hendelseslytter. Denne metoden er nyttig når du arbeider med mer isolerte miljøer der iframen ikke kan samhandle direkte med den overordnede sidens DOM. Begge metodene gir effektive måter å oppdatere innholdet i en innebygd PDF-leser dynamisk på, reduserer behovet for flere statiske sider og tilbyr en brukervennlig nettleseropplevelse.

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

Forbedre PDF-arkivtilgjengelighet med Wix- og JavaScript-meldinger

En annen viktig faktor når du bruker rullegardinelementer for dynamisk å endre en innebygd PDF-URL i Wix, er å sikre at interaksjonen mellom og hovedsiden er effektiv. Mens JavaScript-meldinger lar oss sende data mellom disse to komponentene, kan ytelsen og brukeropplevelsen forbedres ved å optimalisere hvordan utvalget utløser oppdateringer. Dette kan gjøres ved å avvise inngangen, noe som betyr at systemet bare oppdaterer PDF-visningen etter at brukeren har fullført valget, i stedet for ved hver endring.

Et annet aspekt som ikke har blitt dekket ennå er . Siden PDF-filene ligger på en ekstern server (som Digital Ocean), er det avgjørende å sikre at serveren er konfigurert for å tillate tilgang fra Wix-domenet. Hvis serverens CORS-innstillinger ikke er riktig konfigurert, kan det hende at PDF-visningsprogrammet ikke kan laste inn dokumentet, noe som resulterer i feil. Riktige CORS-overskrifter på serveren som er vert for PDF-filene er avgjørende for sømløs integrasjon mellom de to plattformene.

I tillegg kan du forbedre systemet ved å forhåndslaste ofte brukte PDF-filer for å redusere innlastingstiden. Forhåndsinnlastingsstrategier er nyttige når brukeren sannsynligvis vil bytte mellom flere måneder eller år. Ved å lagre disse filene i nettleserens hurtigbuffer, vil påfølgende dokumentinnlasting gå raskere, noe som gir en jevnere brukeropplevelse. Dette kan gjøres ved hjelp av servicearbeidere eller andre hurtigbuffermekanismer, som kan settes opp til å forhåndslaste PDF-er mens brukeren navigerer gjennom de tilgjengelige alternativene.

1. Hvordan legger jeg til rullegardinvelgerne i Wix?
2. Du kan legge til rullegardinelementer ved å bruke Wix-editoren, og bruke JavaScript til å kontrollere dem ved å tilordne unike IDer. Rullegardinelementene vil utløse endringer i PDF-URL-en gjennom .
3. Hva gjør kommando gjøre?
4. De metoden er ansvarlig for å gjengi PDF-visningen og laste inn en bestemt PDF-fil i den. Denne metoden er en del av PSPDFKit-biblioteket som brukes til å vise PDF-filer dynamisk.
5. Kan jeg bruke for kommunikasjon på tvers av opphav?
6. Ja, den API er spesielt utviklet for å kommunisere mellom ulike opprinnelser, for eksempel mellom en overordnet side og en iFrame, noe som er avgjørende for denne implementeringen.
7. Hvordan håndterer jeg feil når jeg laster en PDF?
8. Du kan håndtere feil ved å legge til en blokk til funksjon for å fange opp eventuelle feil som oppstår under lasteprosessen og vise en passende feilmelding.
9. Må jeg konfigurere serveren min for CORS?
10. Ja, hvis PDF-filene dine ligger på et annet domene, må du sørge for at serveren er satt opp med riktig overskrifter for å gi Wix-nettstedet tilgang til dokumentene.

Denne løsningen forenkler prosessen med å vise store arkiver av PDF-filer på én enkelt side. Ved å bruke to rullegardinelementer for å velge år og måned, kan vi dynamisk oppdatere PDF-visningen uten å opprette flere Wix-sider.

Ved å kombinere fleksibiliteten til Velo-rammeverket med JavaScript-meldinger mellom rullegardinmenyene og iFrame, gir denne metoden en effektiv måte å organisere og presentere historiske data på. Det er både skalerbart og brukervennlig for offentlige nettsteder som biblioteksarkiver.