Rippmenüüpõhise PDF-i URL-i vahetamise integreerimine Wixis JavaScripti sõnumside abil

PDF-vaaturi funktsionaalsuse täiustamine Wixi raamatukogu saidil

Suure PDF-failide arhiivi organiseeritud ja kasutajasõbralik kuvamine on avaliku raamatukogu veebisaidi kasutuskogemuse parandamiseks ülioluline. Eesmärk on pakkuda külastajatele sujuvat juurdepääsu ajaloolistele kirjetele, näiteks vanadele ajalehtedele, mis on salvestatud PDF-failidena. Selles projektis loob Wixi, Velo ja HTML-i manustatud elemendi kasutamine aluse tugevale süsteemile.

Wixi platvorm toetab manustatud elemente iframe'ide kaudu, võimaldades kasutajatel lisada interaktiivseid komponente, nagu PDF-vaaturid. See PDF-vaatur on manustatud iframe'i abil ja praegu määrab kuvatava dokumendi staatiline URL. Sujuva kasutuskogemuse tagamiseks on aga vajadus PDF-faili dünaamiliselt muuta vastavalt kasutaja sisendile.

Väljakutse on võimaldada kasutajatel valida kahest rippmenüüst aasta ja kuu, mis käivitab seejärel muudatuse kuvatavas PDF-dokumendis. See hõlmab JavaScripti sõnumite integreerimist iframe'iga suhtlemiseks, võimaldades dokumendi URL-i muuta vastavalt rippmenüü valikutele.

See lähenemisviis mitte ainult ei vähenda vajadust arvukate staatiliste Wixi lehtede järele, vaid lihtsustab ka juurdepääsu raamatukogu PDF-arhiivile. Allpool uurime selle rakendamiseks vajalikke samme ja lahendusi, kasutades Velo raamistikku ja JavaScripti.

Dünaamiline PDF-i laadimine rippmenüü valikutega Wixis

Selles lahenduses kasutame Wixi lehel rippmenüü elementide paari, et dünaamiliselt muuta manustatud iFrame'is kuvatava PDF-faili URL-i. See süsteem on eriti kasulik avalike raamatukogude jaoks, kes soovivad hõlpsat juurdepääsu arhiveeritud ajalehtede PDF-idele. Põhifunktsioone toidab JavaScripti sõnumside, mis saadab kasutajate valikud rippmenüüst manustatud PDF-vaaturisse. PSPDFKit-vaaturit kasutatakse PDF-ide renderdamiseks iFrame'is ja me manipuleerime vaatajat, muutes URL-i vastavalt kasutaja aasta ja kuu valikule. See võimaldab sujuvalt tõsta suuri arhiive ilma mitut staatilist Wixi lehte looma.

Esimene rippmenüü valib aasta ja teine ​​​​rippmenüü valib kuu. Kui kasutaja valib mõlemad, koostab süsteem vastavale PDF-failile sobiva URL-i. The PSPDFKit.load() meetod on selles kesksel kohal, kuna see laadib uue PDF-i värskendatud URL-i alusel iFrame'i. See meetod on osa PSPDFKiti teegist, mis on lehele manustatud välise skripti kaudu. The postisõnum() API on kriitilise tähtsusega ka alternatiivses lahenduses, mis võimaldab sõnumivahetust emalehe ja iframe'i vahel. Kui saadate iframe'i uut PDF-i URL-i sisaldava sõnumi, värskendatakse PDF-vaaturit dünaamiliselt.

Tagamaks, et skript töötab ainult siis, kui DOM on täielikult laaditud, kasutame DOMContentLoaded sündmus. See tagab, et rippmenüü elemendid ja PSPDFKiti konteiner on skriptile juurdepääsetavad. Lisame igasse rippmenüüsse ka sündmuste kuulajad. Kui kasutaja valib aasta või kuu, jäädvustab vastav sündmuste kuulaja valiku ja kutsub välja funktsiooni, et laadida PDF-vaatur uuesti õige URL-iga. Seda käsitletakse lihtsa funktsiooni abil, mis kasutab ripploendites valitud väärtuste põhjal URL-i koostamiseks malliliteraale. Seda meetodit pole mitte ainult lihtne rakendada, vaid ka väga modulaarne, mis võimaldab uute arhiivide lisamisel hõlpsasti värskendada.

Teise lähenemisviisi korral kasutame postisõnum() emalehe ja iFrame'i vaheliseks suhtlemiseks. Emaleht kuulab rippmenüü muudatusi ja saadab uut PDF-i URL-i sisaldava sõnumi iFrame'ile, mis võtab sõnumi vastu sündmustekuulaja abil. See meetod on kasulik isoleeritumate keskkondade puhul, kus iframe ei saa otse emalehe DOM-iga suhelda. Mõlemad meetodid pakuvad tõhusaid viise manustatud PDF-vaaturi sisu dünaamiliseks värskendamiseks, vähendades vajadust mitme staatilise lehe järele ja pakkudes kasutajasõbralikku sirvimiskogemust.

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

PDF-arhiivi juurdepääsetavuse parandamine Wixi ja JavaScripti sõnumside abil

Veel üks oluline kaalutlus rippmenüü elementide kasutamisel manustatud PDF-i URL-i dünaamiliseks muutmiseks Wixis on tagada, et iFrame ja avaleht on tõhus. Kuigi JavaScripti sõnumside võimaldab meil saata andmeid nende kahe komponendi vahel, saab jõudlust ja kasutajakogemust parandada, optimeerides seda, kuidas valik värskendusi käivitab. Seda saab teha sisendi tagasilükkamisega, mis tähendab, et süsteem värskendab PDF-vaaturit alles pärast seda, kui kasutaja on valiku lõpetanud, mitte iga muudatuse korral.

Teine aspekt, mida pole veel käsitletud, on päritoluülene ressursside jagamine (CORS). Kuna PDF-e majutatakse välisserveris (nt Digital Ocean), on ülioluline tagada, et server oleks konfigureeritud võimaldama juurdepääsu Wixi domeenist. Kui serveri CORS-i sätted pole õigesti konfigureeritud, ei pruugi PDF-vaatur olla võimeline dokumenti laadima, mis põhjustab tõrkeid. PDF-faile majutava serveri õiged CORS-päised on kahe platvormi sujuvaks integreerimiseks hädavajalikud.

Lisaks saate süsteemi täiustada, laadides laadimisaja lühendamiseks eellaadimise sageli kasutatavad PDF-failid. Eellaadimisstrateegiad on kasulikud, kui kasutaja vahetab tõenäoliselt mitu kuud või aastat. Kui salvestate need failid brauseri vahemällu, on hilisemad dokumentide laadimised kiiremad, pakkudes sujuvamat kasutuskogemust. Seda saab teha teenindustöötajate või muude vahemällu salvestamise mehhanismide abil, mille saab seadistada PDF-ide eellaadimiseks, kui kasutaja navigeerib saadaolevate valikute vahel.