Integracija preklapljanja URL-jev PDF na podlagi spustnega menija v Wixu z uporabo sporočil JavaScript

Izboljšanje funkcionalnosti pregledovalnika PDF na spletnem mestu knjižnice Wix

Prikaz obsežnega arhiva datotek PDF na organiziran in uporabniku prijazen način je ključnega pomena za izboljšanje uporabniške izkušnje na spletni strani javne knjižnice. Cilj je obiskovalcem ponuditi nemoten dostop do zgodovinskih zapisov, kot so stari časopisi, ki so shranjeni kot datoteke PDF. V tem projektu uporaba Wixa, Velo in elementa za vdelavo HTML ustvari osnovo za robusten sistem.

Platforma Wix podpira vdelane elemente prek iframesov, kar uporabnikom omogoča dodajanje interaktivnih komponent, kot so pregledovalniki PDF. Ta pregledovalnik PDF je vdelan z iframeom in trenutno statični URL določa, kateri dokument je prikazan. Vendar pa je potreba po dinamičnem spreminjanju datoteke PDF na podlagi uporabniškega vnosa bistvena za nemoteno izkušnjo.

Izziv je omogočiti uporabnikom, da iz dveh spustnih menijev izberejo leto in mesec, kar bo nato sprožilo spremembo prikazanega dokumenta PDF. To vključuje integracijo sporočil JavaScript za komunikacijo z okvirjem iframe, kar omogoča spreminjanje URL-ja dokumenta glede na izbire v spustnem meniju.

Ta pristop ne le zmanjša potrebo po številnih statičnih straneh Wix, ampak tudi poenostavi dostop do knjižničnega arhiva PDF. Spodaj raziskujemo korake in rešitve, potrebne za implementacijo tega z uporabo ogrodja Velo in JavaScript.

Dinamično nalaganje PDF-jev s spustnimi izbirami v Wixu

V tej rešitvi uporabljamo par spustnih elementov na strani Wix za dinamično spreminjanje URL-ja datoteke PDF, prikazane v vdelanem iFrame-u. Ta sistem je še posebej uporaben za javne knjižnice, ki želijo zagotoviti enostaven dostop do arhiviranih časopisnih PDF-jev. Osnovno funkcionalnost poganja Sporočila JavaScript, ki pošlje izbire uporabnikov iz spustnih menijev v vdelan pregledovalnik PDF. Pregledovalnik PSPDFKit se uporablja za upodabljanje PDF-jev znotraj iFrame, pregledovalnik pa manipuliramo tako, da spremenimo URL na podlagi uporabnikove izbire leta in meseca. To zagotavlja poenostavljen način za prikazovanje velikih arhivov brez ustvarjanja več statičnih strani Wix.

Prvi spustni meni izbere leto, drugi spustni meni pa mesec. Ko uporabnik izbere oboje, sistem ustvari ustrezen URL za ustrezno datoteko PDF. The PSPDFKit.load() metoda je osrednjega pomena pri tem, saj naloži nov PDF v iFrame na podlagi posodobljenega URL-ja. Ta metoda je del knjižnice PSPDFKit, ki je vdelana v stran prek zunanjega skripta. The postMessage() API je ključnega pomena tudi v alternativni rešitvi, ki omogoča sporočanje med nadrejeno stranjo in okvirjem iframe. S pošiljanjem sporočila z novim URL-jem PDF v okvir iframe se pregledovalnik PDF dinamično posodobi.

Da bi zagotovili, da se skript izvaja le, ko je DOM v celoti naložen, uporabljamo DOMContentLoaded dogodek. To zagotavlja, da so elementi spustnega menija in vsebnik PSPDFKit dostopni skriptu. Vsakemu spustnemu meniju dodamo tudi poslušalce dogodkov. Ko uporabnik izbere leto ali mesec, ustrezen poslušalec dogodkov zajame izbor in pokliče funkcijo za ponovno nalaganje pregledovalnika PDF s pravilnim URL-jem. To se reši s preprosto funkcijo, ki uporablja literale predloge za sestavo URL-ja iz izbranih vrednosti v spustnem meniju. Ta metoda ni samo enostavna za implementacijo, ampak je tudi zelo modularna, kar omogoča enostavno posodabljanje, ko so dodani novi arhivi.

Pri drugem pristopu uporabljamo postMessage() za komunikacijo med nadrejeno stranjo in iFrame. Nadrejena stran posluša spremembe spustnega seznama in pošlje sporočilo z novim URL-jem PDF v okvir iFrame, ki sporočilo prejme s poslušalcem dogodkov. Ta metoda je uporabna pri delu z bolj izoliranimi okolji, kjer iframe ne more neposredno komunicirati z DOM nadrejene strani. Oba načina zagotavljata učinkovite načine za dinamično posodabljanje vsebine vdelanega pregledovalnika PDF, kar zmanjšuje potrebo po več statičnih straneh in ponuja uporabniku prijazno izkušnjo brskanja.

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

Izboljšanje dostopnosti arhiva PDF z Wix in JavaScript Messaging

Drug pomemben pomislek pri uporabi spustnih elementov za dinamično spreminjanje vdelanega URL-ja PDF v Wixu je zagotavljanje, da je interakcija med iFrame in glavna stran je učinkovita. Medtem ko nam sporočila JavaScript omogočajo pošiljanje podatkov med tema dvema komponentama, je mogoče učinkovitost in uporabniško izkušnjo izboljšati z optimizacijo načina, kako izbira sproži posodobitve. To lahko storite tako, da zavrnete odboj vnosa, kar pomeni, da sistem posodobi pregledovalnik PDF šele potem, ko uporabnik zaključi svojo izbiro, in ne ob vsaki spremembi.

Drugi vidik, ki še ni bil zajet, je izmenjava virov navzkrižnega izvora (CORS). Ker PDF-ji gostujejo na zunanjem strežniku (kot je Digital Ocean), je ključnega pomena zagotoviti, da je strežnik konfiguriran tako, da omogoča dostop iz domene Wix. Če nastavitve CORS strežnika niso pravilno konfigurirane, pregledovalnik PDF morda ne bo mogel naložiti dokumenta, kar bo povzročilo napake. Ustrezne glave CORS na strežniku, ki gosti datoteke PDF, so bistvenega pomena za brezhibno integracijo med obema platformama.

Poleg tega lahko izboljšate sistem tako, da vnaprej naložite pogosto dostopne datoteke PDF, da skrajšate čas nalaganja. Strategije prednalaganja so uporabne, ko bo uporabnik verjetno preklapljal med več meseci ali leti. S shranjevanjem teh datotek v predpomnilnik brskalnika bodo nadaljnja nalaganja dokumentov hitrejša, kar bo zagotovilo bolj gladko uporabniško izkušnjo. To je mogoče storiti s pomočjo servisnih delavcev ali drugih mehanizmov predpomnjenja, ki jih je mogoče nastaviti za vnaprejšnje nalaganje PDF-jev, ko uporabnik krmari po razpoložljivih možnostih.