Integracija prebacivanja PDF URL-a na temelju padajućeg izbornika u Wixu pomoću JavaScript poruka

Poboljšanje funkcionalnosti PDF preglednika na Wix knjižnici

Prikazivanje ogromne arhive PDF datoteka na organiziran i korisniku jednostavan način ključno je za poboljšanje korisničkog iskustva na web stranici narodne knjižnice. Cilj je posjetiteljima ponuditi nesmetan pristup povijesnim zapisima poput starih novina, koji su pohranjeni kao PDF-ovi. U ovom projektu upotreba Wixa, Veloa i HTML ugrađenog elementa stvara temelj za robustan sustav.

Wixova platforma podržava ugrađene elemente putem iframeova, omogućujući korisnicima dodavanje interaktivnih komponenti poput PDF preglednika. Ovaj preglednik PDF-a ugrađen je pomoću iframea, a trenutačno statički URL definira koji se dokument prikazuje. Međutim, potreba za dinamičkim mijenjanjem PDF datoteke na temelju korisničkog unosa ključna je za glatko iskustvo.

Izazov je dopustiti korisnicima da odaberu godinu i mjesec s dva padajuća izbornika, što će potom pokrenuti promjenu prikazanog PDF dokumenta. To uključuje integraciju JavaScript poruka za komunikaciju s iframeom, omogućujući promjenu URL-a dokumenta prema odabirima s padajućeg izbornika.

Ovaj pristup ne samo da smanjuje potrebu za brojnim statičnim Wix stranicama, već i pojednostavljuje pristup PDF arhivi knjižnice. U nastavku istražujemo korake i rješenja potrebna za implementaciju ovoga pomoću okvira Velo i JavaScripta.

Dinamičko učitavanje PDF-a s padajućim odabirima u Wixu

U ovom rješenju koristimo par padajućih elemenata na Wix stranici za dinamičku izmjenu URL-a PDF datoteke prikazane unutar ugrađenog iFramea. Ovaj je sustav posebno koristan za javne knjižnice koje žele omogućiti jednostavan pristup arhiviranim novinskim PDF-ovima. Osnovnu funkcionalnost pokreće JavaScript poruke, koji šalje korisničke odabire s padajućih izbornika u ugrađeni PDF preglednik. PSPDFKit preglednik koristi se za renderiranje PDF-ova unutar iFramea, a mi manipuliramo preglednikom mijenjanjem URL-a na temelju korisnikova izbora godine i mjeseca. Ovo pruža pojednostavljen način za izlaženje na površinu velikih arhiva bez stvaranja više statičkih Wix stranica.

Prvi padajući izbornik odabire godinu, a drugi padajući izbornik odabire mjesec. Kada korisnik odabere oboje, sustav konstruira odgovarajući URL za odgovarajuću PDF datoteku. The PSPDFKit.load() Metoda je ključna za ovo jer učitava novi PDF u iFrame na temelju ažuriranog URL-a. Ova je metoda dio biblioteke PSPDFKit koja je ugrađena na stranicu putem vanjske skripte. The objavi poruku() API je također kritičan u alternativnom rješenju, koje omogućuje razmjenu poruka između nadređene stranice i iframea. Slanjem poruke koja sadrži URL novog PDF-a u iframe, PDF preglednik se dinamički ažurira.

Kako bismo osigurali da se skripta izvodi samo kada je DOM u potpunosti učitan, koristimo DOMContentLoaded događaj. Ovo osigurava da su padajući elementi i PSPDFKit spremnik dostupni skripti. Svakom padajućem izborniku također dodajemo slušatelje događaja. Kada korisnik odabere godinu ili mjesec, odgovarajući slušatelj događaja bilježi odabir i poziva funkciju za ponovno učitavanje PDF preglednika s točnim URL-om. To se rješava pomoću jednostavne funkcije koja koristi literale predloška za konstruiranje URL-a iz odabranih vrijednosti u padajućim izbornicima. Ova metoda nije samo jednostavna za implementaciju, već je i vrlo modularna, što omogućuje jednostavno ažuriranje kako se dodaju nove arhive.

U drugom pristupu koristimo objavi poruku() za komunikaciju između nadređene stranice i iFramea. Nadređena stranica osluškuje promjene padajućeg izbornika i šalje poruku koja sadrži URL novog PDF-a u iFrame, koji prima poruku pomoću slušatelja događaja. Ova je metoda korisna kada se radi o izoliranijim okruženjima u kojima iframe ne može izravno komunicirati s DOM-om nadređene stranice. Obje metode pružaju učinkovite načine dinamičkog ažuriranja sadržaja ugrađenog preglednika PDF-a, smanjujući potrebu za višestrukim statičnim stranicama i nudeći korisničko iskustvo pregledavanja.

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

Poboljšanje pristupačnosti PDF arhive uz Wix i JavaScript poruke

Drugo važno razmatranje pri korištenju padajućih elemenata za dinamičku izmjenu URL-a ugrađenog PDF-a u Wixu je osiguravanje interakcije između iFrame a glavna stranica je učinkovita. Iako nam razmjena JavaScript poruka omogućuje slanje podataka između ove dvije komponente, performanse i korisničko iskustvo mogu se poboljšati optimiziranjem načina na koji odabir pokreće ažuriranja. To se može učiniti uklanjanjem odbijanja ulaza, što znači da sustav samo ažurira PDF preglednik nakon što korisnik dovrši svoj odabir, a ne pri svakoj promjeni.

Drugi aspekt koji još nije pokriven je dijeljenje izvora s više izvora (CORS). Budući da se PDF-ovi nalaze na vanjskom poslužitelju (kao što je Digital Ocean), ključno je osigurati da poslužitelj bude konfiguriran tako da dopušta pristup s Wix domene. Ako CORS postavke poslužitelja nisu ispravno konfigurirane, PDF preglednik možda neće moći učitati dokument, što će rezultirati pogreškama. Ispravna CORS zaglavlja na poslužitelju koji hostira PDF datoteke ključna su za besprijekornu integraciju između dviju platformi.

Osim toga, možete poboljšati sustav predučitavanjem često pristupanih PDF datoteka kako biste smanjili vrijeme učitavanja. Strategije prethodnog učitavanja korisne su kada je vjerojatno da će se korisnik prebacivati ​​između više mjeseci ili godina. Pohranjivanjem ovih datoteka u predmemoriju preglednika, naknadna učitavanja dokumenata bit će brža, pružajući glatko korisničko iskustvo. To se može učiniti pomoću uslužnih radnika ili drugih mehanizama za predmemoriju, koji se mogu postaviti za unaprijed učitavanje PDF-ova dok se korisnik kreće kroz dostupne opcije.