Integrácia prepínania adries URL PDF riadeného rozbaľovacím zoznamom vo Wix pomocou správ JavaScript

Vylepšenie funkčnosti prehliadača PDF na webe knižnice Wix

Zobrazenie rozsiahleho archívu súborov PDF organizovaným a užívateľsky prívetivým spôsobom je kľúčové pre zlepšenie používateľského zážitku na webovej stránke verejnej knižnice. Cieľom je ponúknuť návštevníkom bezproblémový prístup k historickým záznamom, ako sú staré noviny, ktoré sú uložené vo formáte PDF. V tomto projekte použitie Wix, Velo a prvku na vloženie HTML vytvára základ pre robustný systém.

Platforma Wix podporuje vložené prvky prostredníctvom prvkov iframe, čo umožňuje používateľom pridávať interaktívne komponenty, ako sú napríklad prehliadače PDF. Tento prehliadač PDF je vložený pomocou prvku iframe a v súčasnosti statická adresa URL definuje, ktorý dokument sa zobrazí. Potreba dynamicky meniť súbor PDF na základe vstupu používateľa je však nevyhnutná pre bezproblémové používanie.

Výzvou je umožniť používateľom vybrať si rok a mesiac z dvoch rozbaľovacích ponúk, čo následne spustí zmenu v zobrazenom dokumente PDF. Zahŕňa to integráciu správ JavaScript na komunikáciu s prvkom iframe, čím sa umožní zmena adresy URL dokumentu podľa výberov v rozbaľovacej ponuke.

Tento prístup nielen znižuje potrebu mnohých statických stránok Wix, ale tiež zjednodušuje prístup k archívu PDF knižnice. Nižšie skúmame kroky a riešenia potrebné na implementáciu pomocou rámca Velo a JavaScriptu.

Dynamické načítanie PDF s rozbaľovacím výberom vo Wix

V tomto riešení používame dvojicu rozbaľovacích prvkov na stránke Wix na dynamickú úpravu adresy URL súboru PDF zobrazeného v rámci vloženého prvku iFrame. Tento systém je užitočný najmä pre verejné knižnice, ktoré chcú poskytnúť jednoduchý prístup k archivovaným novinovým PDF. Základná funkčnosť je poháňaná Správy JavaScript, ktorý odosiela užívateľské výbery z rozbaľovacích ponúk do vstavaného prehliadača PDF. Prehliadač PSPDFKit sa používa na vykreslenie súborov PDF vo vnútri prvku iFrame a my s ním manipulujeme tak, že zmeníme adresu URL na základe výberu roka a mesiaca používateľom. Poskytuje to efektívny spôsob, ako zobraziť veľké archívy bez vytvárania viacerých statických stránok Wix.

V prvej rozbaľovacej ponuke sa vyberie rok a v druhej rozbaľovacej ponuke sa vyberie mesiac. Keď používateľ vyberie oboje, systém vytvorí vhodnú adresu URL pre príslušný súbor PDF. The PSPDFKit.load() Táto metóda je kľúčová, pretože načíta nový súbor PDF do prvku iFrame na základe aktualizovanej adresy URL. Táto metóda je súčasťou knižnice PSPDFKit, ktorá je vložená na stránku prostredníctvom externého skriptu. The postMessage() Rozhranie API je tiež dôležité v alternatívnom riešení, ktoré umožňuje odosielanie správ medzi nadradenou stránkou a prvkom iframe. Odoslaním správy obsahujúcej novú adresu URL PDF do prvku iframe sa prehliadač PDF dynamicky aktualizuje.

Aby sme zabezpečili, že skript beží len vtedy, keď je DOM plne načítaný, používame príkaz DOMContentLoaded udalosť. To zaisťuje, že rozbaľovacie prvky a kontajner PSPDFKit sú prístupné pre skript. Do každej rozbaľovacej ponuky pridávame aj poslucháčov udalostí. Keď používateľ vyberie rok alebo mesiac, príslušný prijímač udalostí zachytí výber a zavolá funkciu na opätovné načítanie prehliadača PDF so správnou adresou URL. Toto je riešené pomocou jednoduchej funkcie, ktorá používa šablónové literály na vytvorenie adresy URL z vybratých hodnôt v rozbaľovacích zoznamoch. Táto metóda je nielen ľahko implementovateľná, ale aj vysoko modulárna, čo umožňuje jednoduché aktualizácie pri pridávaní nových archívov.

V druhom prístupe používame postMessage() na komunikáciu medzi nadradenou stránkou a iFrame. Nadradená stránka počúva zmeny rozbaľovacej ponuky a odošle správu obsahujúcu novú adresu URL PDF do prvku iFrame, ktorý správu prijme pomocou prijímača udalostí. Táto metóda je užitočná pri práci s izolovanejšími prostrediami, kde iframe nemôže priamo interagovať s DOM nadradenej stránky. Obe metódy poskytujú efektívne spôsoby dynamickej aktualizácie obsahu vloženého prehliadača PDF, čím sa znižuje potreba viacerých statických stránok a ponúka sa užívateľsky príjemné prehliadanie.

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

Zlepšenie dostupnosti archívu PDF pomocou správ Wix a JavaScript

Ďalšou dôležitou úvahou pri používaní rozbaľovacích prvkov na dynamickú úpravu vloženej adresy URL PDF vo Wix je zabezpečenie interakcie medzi iFrame a hlavná stránka je efektívna. Zatiaľ čo odosielanie správ JavaScript nám umožňuje odosielať údaje medzi týmito dvoma komponentmi, výkon a používateľskú skúsenosť možno zlepšiť optimalizáciou spôsobu, akým výber spúšťa aktualizácie. Dá sa to dosiahnuť odskočením vstupu, čo znamená, že systém aktualizuje prehliadač PDF až potom, čo používateľ dokončí výber, a nie pri každej zmene.

Ďalším aspektom, ktorý ešte nebol pokrytý, je zdieľanie zdrojov medzi zdrojmi (CORS). Keďže súbory PDF sú hosťované na externom serveri (napríklad Digital Ocean), je dôležité zabezpečiť, aby bol server nakonfigurovaný tak, aby umožňoval prístup z domény Wix. Ak nastavenia CORS servera nie sú správne nakonfigurované, prehliadač PDF nemusí byť schopný načítať dokument, čo môže mať za následok chyby. Správne hlavičky CORS na serveri hosťujúcom súbory PDF sú nevyhnutné pre bezproblémovú integráciu medzi týmito dvoma platformami.

Okrem toho môžete systém vylepšiť predbežným načítaním často používaných súborov PDF, aby ste skrátili časy načítania. Stratégie predbežného načítania sú užitočné, keď je pravdepodobné, že používateľ bude prepínať medzi niekoľkými mesiacmi alebo rokmi. Uložením týchto súborov do vyrovnávacej pamäte prehliadača bude následné načítanie dokumentov rýchlejšie, čo poskytne používateľovi plynulejší zážitok. Dá sa to urobiť pomocou servisných pracovníkov alebo iných mechanizmov ukladania do vyrovnávacej pamäte, ktoré je možné nastaviť tak, aby vopred načítali súbory PDF, keď používateľ prechádza dostupnými možnosťami.