A legördülő menüből vezérelt PDF URL-váltás integrálása a Wix-ben JavaScript-üzenetek használatával

A PDF-megtekintő funkcióinak javítása a Wix-könyvtár webhelyén

A PDF-fájlok hatalmas archívumának rendszerezett és felhasználóbarát megjelenítése alapvető fontosságú a nyilvános könyvtárak webhelyén elérhető felhasználói élmény javításához. A cél az, hogy a látogatók zökkenőmentesen hozzáférjenek a történelmi feljegyzésekhez, például a régi újságokhoz, amelyeket PDF-ként tárolnak. Ebben a projektben a Wix, a Velo és egy HTML beágyazási elem használata megteremti az alapot egy robusztus rendszerhez.

A Wix platformja támogatja a beágyazott elemeket iframe-eken keresztül, így a felhasználók interaktív összetevőket, például PDF-megtekintőket adhatnak hozzá. Ez a PDF-megtekintő egy iframe-be van ágyazva, és jelenleg egy statikus URL határozza meg, hogy melyik dokumentum legyen megjelenítve. A zökkenőmentes élményhez azonban elengedhetetlen a PDF-fájl dinamikus módosítása a felhasználói bevitel alapján.

A kihívás az, hogy a felhasználók két legördülő menüből válasszanak ki egy évet és egy hónapot, amelyek ezután változást idéznek elő a megjelenített PDF-dokumentumban. Ez magában foglalja a JavaScript-üzenetek integrálását az iframe-mel való kommunikációhoz, lehetővé téve a dokumentum URL-címének módosítását a legördülő menüben.

Ez a megközelítés nemcsak csökkenti a számos statikus Wix-oldal szükségességét, hanem leegyszerűsíti a könyvtár PDF-archívumához való hozzáférést is. Az alábbiakban megvizsgáljuk a Velo keretrendszer és a JavaScript használatával történő megvalósításához szükséges lépéseket és megoldásokat.

Parancs	Használati példa
PSPDFKit.load()	Ez a módszer egy adott tárolóban inicializálja a PSPDFKit PDF-megtekintőt. Betölt egy PDF-fájlt a megadott URL-ről, így megtekinthető a beágyazási elemen belül. Kifejezetten a PSPDFKit JavaScript-könyvtárára vonatkozik, amely PDF-dokumentumok beágyazására és megtekintésére lett kialakítva.
postMessage()	A szülőablak és a beágyazott iframe közötti kommunikációra szolgál. Ebben az összefüggésben üzenetet küld a főoldalról az iframe-nek, lehetővé téve, hogy az iframe frissítse tartalmát (a PDF URL-címét) a legördülő listából származó kijelölések alapján.
window.addEventListener("message")	Ez az eseményfigyelő hozzáadódik az iframe-hez, hogy figyelje a postMessage()-en keresztül küldött üzeneteket. Feldolgozza az üzenetet, és a kapott adatok alapján dinamikusan betölt egy új PDF-dokumentumot az iframe-be.
event.data	Az üzeneteseménykezelőn belül az event.data a szülőablakból küldött adatokat tartalmazza. Ebben az esetben tartalmazza a PSPDFKit megjelenítőbe betöltendő kiválasztott PDF fájl URL-jét.
document.getElementById()	Ez a DOM-manipulációs módszer egy HTML-elemet kér le az azonosítója alapján. Arra használják, hogy rögzítsék a felhasználói bemeneteket a legördülő elemekből, lehetővé téve a szkript számára, hogy meghatározza a PDF URL-frissítésének kiválasztott évet és hónapját.
DOMContentLoaded	Egy esemény, amely biztosítja, hogy a JavaScript csak a DOM teljes betöltése után futjon le. Ez megakadályozza a hibákat, amikor a DOM-elemekhez próbál hozzáférni, mielőtt azok léteznének.
addEventListener("change")	Ez az eseményfigyelő figyeli a legördülő elemeket az esetleges változások miatt. Ha a felhasználó másik évet vagy hónapot választ, a funkció aktiválja a PDF URL-cím frissítését és a megfelelő dokumentum betöltését.
template literals	A sablonliterálok (amelyeket backtickek zárnak be) lehetővé teszik a változók karakterláncokba ágyazását, megkönnyítve ezzel a kiválasztott PDF URL-címének dinamikus generálását. Például: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	A PSPDFKit inicializálásában a tároló megadja azt a HTML-elemet (azonosító alapján), ahol a PDF-megtekintő megjelenik. Ez elengedhetetlen annak meghatározásához, hogy a PDF hol jelenjen meg az oldalon.

Dinamikus PDF-betöltés legördülő menüből a Wix-ben

Ebben a megoldásban egy pár legördülő elemet használunk egy Wix-oldalon, hogy dinamikusan módosítsuk a beágyazott iFrame-ben megjelenített PDF-fájl URL-címét. Ez a rendszer különösen hasznos a közkönyvtárak számára, amelyek egyszerű hozzáférést szeretnének biztosítani az archivált újság-PDF-ekhez. Az alapvető funkciókat a , amely elküldi a legördülő menükből a felhasználói választásokat a beágyazott PDF-megjelenítőbe. A PSPDFKit megjelenítő az iFrame-en belüli PDF-fájlok megjelenítésére szolgál, és a megjelenítőt úgy manipuláljuk, hogy módosítjuk az URL-t a felhasználó által választott év és hónap alapján. Ez leegyszerűsíti a nagy archívumok megjelenítését több statikus Wix-oldal létrehozása nélkül.

Az első legördülő menü az évet, a második pedig a hónapot választja ki. Ha a felhasználó mindkettőt kiválasztja, a rendszer létrehozza a megfelelő URL-t a megfelelő PDF-fájlhoz. A metódus központi szerepet játszik ebben, mivel a frissített URL alapján betölti az új PDF-et az iFrame-be. Ez a módszer a PSPDFKit könyvtár része, amely egy külső szkripten keresztül van beágyazva az oldalba. A Az API szintén kritikus az alternatív megoldásban, amely lehetővé teszi a szülőoldal és az iframe közötti üzenetváltást. Az új PDF URL-címet tartalmazó üzenet iframe-be küldésével a PDF-megtekintő dinamikusan frissül.

Annak biztosítására, hogy a szkript csak akkor fusson, ha a DOM teljesen betöltött, használjuk a esemény. Ez biztosítja, hogy a legördülő elemek és a PSPDFKit tároló elérhetők legyenek a szkript számára. Minden egyes legördülő menühöz eseményfigyelőket is hozzáadunk. Amikor a felhasználó kiválaszt egy évet vagy hónapot, a megfelelő eseményfigyelő rögzíti a kijelölést, és meghív egy függvényt a PDF-megjelenítő újratöltéséhez a megfelelő URL-lel. Ezt egy egyszerű függvény kezeli, amely sablonliterálokat használ az URL létrehozásához a legördülő menükben kiválasztott értékekből. Ez a módszer nem csak könnyen megvalósítható, hanem rendkívül moduláris is, lehetővé téve az egyszerű frissítéseket, amikor új archívumok kerülnek hozzáadásra.

A második megközelítésben használjuk a szülőoldal és az iFrame közötti kommunikációhoz. A szülőoldal figyeli a legördülő menü módosításait, és az új PDF URL-címet tartalmazó üzenetet küld az iFrame-nek, amely eseményfigyelő segítségével fogadja az üzenetet. Ez a módszer akkor hasznos, ha elszigeteltebb környezetekkel foglalkozik, ahol az iframe nem tud közvetlenül együttműködni a szülőoldal DOM-jával. Mindkét módszer hatékony módot kínál a beágyazott PDF-megtekintő tartalmának dinamikus frissítésére, csökkentve a több statikus oldal szükségességét, és felhasználóbarát böngészési élményt kínál.

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

A PDF-archívum hozzáférhetőségének javítása Wix- és JavaScript-üzenetkezeléssel

Egy másik fontos szempont, amikor legördülő elemekkel dinamikusan módosít egy beágyazott PDF URL-t a Wixben, annak biztosítása, hogy a és a főoldal hatékony. Míg a JavaScript-üzenetkezelés lehetővé teszi számunkra, hogy adatokat küldjünk e két összetevő között, a teljesítmény és a felhasználói élmény javítható a kijelölés frissítések kiváltásának optimalizálásával. Ez megtehető a bemenet visszafordításával, ami azt jelenti, hogy a rendszer csak akkor frissíti a PDF-nézegetőt, miután a felhasználó befejezte a kiválasztást, nem pedig minden változtatáskor.

Egy másik szempont, amivel még nem foglalkoztak . Mivel a PDF-fájlokat egy külső szerver (például a Digital Ocean) tárolja, elengedhetetlen annak biztosítása, hogy a szerver úgy legyen beállítva, hogy engedélyezze a hozzáférést a Wix tartományból. Ha a szerver CORS-beállításai nincsenek megfelelően konfigurálva, előfordulhat, hogy a PDF-megtekintő nem tudja betölteni a dokumentumot, ami hibákat eredményez. A megfelelő CORS-fejlécek a PDF-fájlokat tároló szerveren elengedhetetlenek a két platform közötti zökkenőmentes integrációhoz.

Ezenkívül a rendszert a gyakran használt PDF-fájlok előbetöltésével javíthatja a betöltési idő csökkentése érdekében. Az előtöltési stratégiák akkor hasznosak, ha a felhasználó valószínűleg több hónap vagy év között vált. Ha ezeket a fájlokat a böngésző gyorsítótárában tárolja, a későbbi dokumentumbetöltések gyorsabbak lesznek, simább felhasználói élményt biztosítva. Ez megtehető szervizmunkások vagy más gyorsítótárazási mechanizmusok segítségével, amelyek beállíthatók úgy, hogy a PDF-fájlok előre betöltsenek, miközben a felhasználó a rendelkezésre álló lehetőségek között navigál.

1. Hogyan adhatom hozzá a legördülő választókat a Wixben?
2. Legördülő elemeket a Wix-szerkesztővel adhat hozzá, és JavaScript segítségével vezérelheti őket egyedi azonosítók hozzárendelésével. A legördülő elemek módosítják a PDF URL-címet .
3. Mit jelent a parancsot tenni?
4. A metódus felelős a PDF-megtekintő megjelenítéséért és egy adott PDF-fájl betöltéséért. Ez a módszer a PSPDFKit könyvtár része, amelyet a PDF-fájlok dinamikus megjelenítésére használnak.
5. Használhatom eredetközi kommunikációhoz?
6. Igen, a Az API-t kifejezetten a különböző források, például a szülőoldal és az iFrame közötti kommunikációra tervezték, ami kulcsfontosságú ennél a megvalósításnál.
7. Hogyan kezelhetem a hibákat PDF betöltésekor?
8. A hibákat az a hozzáadásával kezelheti blokkolja a funkciót a betöltési folyamat során fellépő hibák észlelésére és a megfelelő hibaüzenet megjelenítésére.
9. Be kell konfigurálnom a szerveremet a CORS számára?
10. Igen, ha a PDF-fájlokat egy másik tartomány tárolja, akkor meg kell győződnie arról, hogy a kiszolgáló megfelelően van beállítva fejléceket, hogy a Wix webhely hozzáférjen a dokumentumokhoz.

Ez a megoldás leegyszerűsíti a PDF-fájlok nagy archívumainak egyetlen oldalon való megjelenítését. Két legördülő elem használatával az év és a hónap kiválasztásához dinamikusan frissíthetjük a PDF-megtekintőt anélkül, hogy több Wix-oldalt hoznánk létre.

A Velo keretrendszer rugalmasságát a legördülő menük és az iFrame közötti JavaScript-üzenetkezeléssel kombinálva ez a módszer hatékony módszert biztosít az előzményadatok rendszerezésére és bemutatására. Egyszerre méretezhető és felhasználóbarát nyilvános webhelyek, például könyvtári archívumok számára.