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.

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 JavaScript üzenetküldés, 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 PSPDFKit.load() 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 postMessage() 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 DOMContentLoaded 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 postMessage() 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 iFrame é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 eredetközi erőforrás-megosztás (CORS). 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.