Išskleidžiamuoju meniu pagrįsto PDF URL perjungimo integravimas „Wix“ naudojant „JavaScript“ pranešimus

PDF peržiūros priemonės funkcionalumo tobulinimas Wix bibliotekos svetainėje

Norint pagerinti viešosios bibliotekos svetainės naudotojų patirtį, labai svarbu organizuotai ir patogiai rodyti didelį PDF failų archyvą. Tikslas yra pasiūlyti lankytojams sklandžią prieigą prie istorinių įrašų, pvz., senų laikraščių, kurie saugomi PDF formatu. Šiame projekte Wix, Velo ir HTML įterpimo elemento naudojimas sukuria tvirtos sistemos pagrindą.

„Wix“ platforma palaiko įterptuosius elementus per „iframe“, leidžiančius vartotojams pridėti interaktyvių komponentų, tokių kaip PDF peržiūros priemonės. Ši PDF peržiūros priemonė yra įterpta naudojant iframe, o šiuo metu statinis URL apibrėžia, kuris dokumentas bus rodomas. Tačiau norint sklandžiai naudotis, būtina dinamiškai keisti PDF failą pagal vartotojo įvestį.

Iššūkis yra leisti vartotojams pasirinkti metus ir mėnesį iš dviejų išskleidžiamųjų meniu, o tai suaktyvins rodomo PDF dokumento pakeitimą. Tai apima „JavaScript“ pranešimų integravimą, kad būtų galima susisiekti su „iframe“, leidžiant keisti dokumento URL, atsižvelgiant į išskleidžiamajame meniu.

Šis metodas ne tik sumažina daugelio statinių Wix puslapių poreikį, bet ir supaprastina prieigą prie bibliotekos PDF archyvo. Toliau nagrinėjame veiksmus ir sprendimus, kurių reikia norint tai įgyvendinti naudojant „Velo“ sistemą ir „JavaScript“.

komandą	Naudojimo pavyzdys
PSPDFKit.load()	Šis metodas inicijuoja PSPDFKit PDF peržiūros priemonę tam tikrame konteineryje. Jis įkelia PDF failą iš pateikto URL, todėl jį galima peržiūrėti įdėjimo elemente. Tai būdinga PSPDFKit „JavaScript“ bibliotekai, kuri yra pritaikyta PDF dokumentams įterpti ir peržiūrėti.
postMessage()	Naudojamas ryšiui tarp pirminio lango ir įterptojo iframe. Šiame kontekste jis siunčia pranešimą iš pagrindinio puslapio į iframe, leidžiantį iframe atnaujinti turinį (PDF URL) pagal išskleidžiamajame meniu.
window.addEventListener("message")	Šis įvykių klausytojas įtrauktas į iframe, kad būtų galima klausytis pranešimų, išsiųstų per postMessage(). Jis apdoroja pranešimą, kad dinamiškai įkeltų naują PDF dokumentą į iframe pagal gautus duomenis.
event.data	Pranešimo įvykių tvarkyklėje event.data yra duomenys, išsiųsti iš pirminio lango. Šiuo atveju jame yra pasirinkto PDF failo, kuris turi būti įkeltas į PSPDFKit peržiūros programą, URL.
document.getElementById()	Šis DOM manipuliavimo metodas nuskaito HTML elementą pagal jo ID. Jis naudojamas fiksuoti vartotojo įvestį iš išskleidžiamųjų elementų, leidžiant scenarijui nustatyti pasirinktus metus ir mėnesį PDF URL naujinimui.
DOMContentLoaded	Įvykis, užtikrinantis, kad „JavaScript“ bus vykdomas tik visiškai įkėlus DOM. Taip išvengiama klaidų bandant pasiekti DOM elementus, kol jie dar neegzistuoja.
addEventListener("change")	Šis įvykių klausytojas stebi, ar išskleidžiamuosiuose elementuose nėra pakeitimų. Kai vartotojas pasirenka kitus metus ar mėnesį, suaktyvinama funkcija, skirta atnaujinti PDF URL ir įkelti atitinkamą dokumentą.
template literals	Šablonų literalai (uždengti atgalinėmis žymomis) leidžia įterpti kintamuosius į eilutes, todėl lengva dinamiškai generuoti pasirinkto PDF URL. Pavyzdžiui: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	Inicijuojant PSPDFKit konteineris nurodo HTML elementą (pagal ID), kuriame bus pateikta PDF peržiūros priemonė. Tai būtina norint nustatyti, kur puslapyje bus rodomas PDF.

Dinaminis PDF įkėlimas naudojant išskleidžiamąjį pasirinkimą sistemoje „Wix“.

Šiame sprendime mes naudojame porą išskleidžiamųjų elementų „Wix“ puslapyje, kad dinamiškai pakeistume PDF failo, rodomo įterptame „iFrame“, URL. Ši sistema ypač naudinga viešosioms bibliotekoms, norinčioms suteikti lengvą prieigą prie archyvuotų laikraščių PDF. Pagrindinės funkcijos yra maitinamos , kuri siunčia vartotojo pasirinkimus iš išskleidžiamųjų meniu į įterptąją PDF peržiūros priemonę. PSPDFKit peržiūros priemonė naudojama PDF failams pateikti iFrame viduje, o mes manipuliuojame peržiūros priemone keisdami URL pagal naudotojo pasirinktus metus ir mėnesį. Tai suteikia supaprastintą būdą pateikti didelius archyvus nekuriant kelių statinių „Wix“ puslapių.

Pirmame išskleidžiamajame meniu pasirenkami metai, o antrajame – mėnuo. Kai vartotojas pasirenka abu, sistema sukuria atitinkamą atitinkamo PDF failo URL adresą. The Metodas yra svarbiausias dalykas, nes jis įkelia naują PDF į „iFrame“ pagal atnaujintą URL. Šis metodas yra PSPDFKit bibliotekos dalis, kuri yra įterpta į puslapį naudojant išorinį scenarijų. The API taip pat labai svarbi alternatyviame sprendime, kuris leidžia perduoti pranešimus tarp pagrindinio puslapio ir „iframe“. Išsiunčiant pranešimą su nauju PDF URL į iframe, PDF peržiūros priemonė atnaujinama dinamiškai.

Norėdami užtikrinti, kad scenarijus būtų paleistas tik tada, kai DOM yra visiškai įkeltas, naudojame renginys. Taip užtikrinama, kad scenarijus galėtų pasiekti išskleidžiamuosius elementus ir PSPDFKit konteinerį. Prie kiekvieno išskleidžiamojo meniu taip pat pridedame įvykių klausytojus. Kai vartotojas pasirenka metus ar mėnesį, atitinkamas įvykių klausytojas užfiksuoja pasirinkimą ir iškviečia funkciją, kad iš naujo įkeltų PDF peržiūros priemonę tinkamu URL. Tai atliekama naudojant paprastą funkciją, kuri naudoja šabloninius literatus, kad sukurtų URL iš pasirinktų verčių išskleidžiamuosiuose meniu. Šis metodas yra ne tik lengvai įgyvendinamas, bet ir labai modulinis, todėl jį galima lengvai atnaujinti pridedant naujų archyvų.

Antruoju metodu mes naudojame palaikyti ryšį tarp pagrindinio puslapio ir „iFrame“. Pagrindinis puslapis klausosi išskleidžiamojo sąrašo pakeitimų ir siunčia pranešimą su nauju PDF URL į iFrame, kuris gauna pranešimą naudodamas įvykių klausytoją. Šis metodas yra naudingas dirbant su labiau izoliuotomis aplinkomis, kuriose iframe negali tiesiogiai sąveikauti su pirminio puslapio DOM. Abu metodai suteikia veiksmingų būdų dinamiškai atnaujinti įterptosios PDF peržiūros priemonės turinį, sumažinant kelių statinių puslapių poreikį ir suteikiant patogią naršymo patirtį.

// 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 archyvo prieinamumo tobulinimas naudojant „Wix“ ir „JavaScript“ pranešimų siuntimą

Kitas svarbus veiksnys naudojant išskleidžiamuosius elementus dinamiškai modifikuojant įterptąjį PDF URL sistemoje Wix yra užtikrinti, kad ir pagrindinis puslapis yra efektyvus. Nors „JavaScript“ pranešimai leidžia siųsti duomenis tarp šių dviejų komponentų, našumą ir vartotojo patirtį galima pagerinti optimizuojant, kaip pasirinkimas suaktyvina naujinimus. Tai galima padaryti atmetus įvestį, o tai reiškia, kad sistema PDF peržiūros priemonę atnaujina tik tada, kai vartotojas baigia pasirinkimą, o ne kiekvieną pakeitimą.

Kitas aspektas, kuris dar nebuvo aptartas . Kadangi PDF failai yra talpinami išoriniame serveryje (pvz., Digital Ocean), labai svarbu užtikrinti, kad serveris būtų sukonfigūruotas taip, kad būtų galima pasiekti iš Wix domeno. Jei serverio CORS nustatymai nėra tinkamai sukonfigūruoti, PDF peržiūros programa gali negalėti įkelti dokumento, todėl gali atsirasti klaidų. Tinkamos CORS antraštės serveryje, kuriame yra PDF failai, yra būtinos sklandžiam dviejų platformų integravimui.

Be to, galite patobulinti sistemą iš anksto įkeldami dažnai pasiekiamus PDF failus, kad sumažintumėte įkėlimo laiką. Išankstinio įkėlimo strategijos yra naudingos, kai tikėtina, kad vartotojas perjungs kelis mėnesius ar metus. Išsaugojus šiuos failus naršyklės talpykloje, paskesnis dokumentų įkėlimas bus greitesnis, todėl naudotojo patirtis bus sklandesnė. Tai galima padaryti naudojant paslaugų darbuotojus ar kitus talpyklos mechanizmus, kuriuos galima nustatyti iš anksto įkelti PDF failus, kai vartotojas naršo per galimas parinktis.

1. Kaip „Wix“ pridėti išskleidžiamuosius parinkiklius?
2. Galite pridėti išskleidžiamųjų elementų naudodami „Wix“ redaktorių ir naudodami „JavaScript“ juos valdyti priskirdami unikalius ID. Išskleidžiamieji elementai suaktyvins PDF URL pakeitimus .
3. Ką daro komandą daryti?
4. The metodas yra atsakingas už PDF peržiūros priemonės pateikimą ir konkretaus PDF failo įkėlimą į ją. Šis metodas yra PSPDFKit bibliotekos, naudojamos dinamiškai rodyti PDF failus, dalis.
5. Ar galiu naudoti bendravimui iš įvairių šaltinių?
6. Taip, API yra specialiai sukurta bendrauti tarp skirtingų šaltinių, pvz., tarp pirminio puslapio ir „iFrame“, o tai labai svarbu šiam diegimui.
7. Kaip tvarkyti klaidas įkeliant PDF?
8. Galite tvarkyti klaidas pridėdami a blokuoti į funkcija, kad užfiksuotų visas klaidas, atsirandančias įkėlimo proceso metu, ir parodytų atitinkamą klaidos pranešimą.
9. Ar man reikia sukonfigūruoti savo serverį CORS?
10. Taip, jei jūsų PDF yra kitame domene, turėsite užtikrinti, kad serveris būtų tinkamai nustatytas antraštes, kad „Wix“ svetainė galėtų pasiekti dokumentus.

Šis sprendimas supaprastina didelių PDF failų archyvų rodymo viename puslapyje procesą. Naudodami du išskleidžiamuosius elementus metams ir mėnesiui pasirinkti, galime dinamiškai atnaujinti PDF peržiūros programą nekurdami kelių Wix puslapių.

Derinant „Velo“ sistemos lankstumą su „JavaScript“ pranešimais tarp išskleidžiamųjų meniu ir „iFrame“, šis metodas yra efektyvus būdas tvarkyti ir pateikti istorinius duomenis. Jis yra keičiamas ir patogus naudoti viešose svetainėse, pvz., bibliotekų archyvuose.