Integrace přepínání adres URL PDF řízené rozevíracím seznamem ve Wix pomocí zasílání zpráv JavaScript

Vylepšení funkčnosti prohlížeče PDF na webu knihovny Wix

Zobrazení rozsáhlého archivu souborů PDF organizovaným a uživatelsky přívětivým způsobem je zásadní pro zlepšení uživatelské zkušenosti na webu veřejné knihovny. Cílem je nabídnout návštěvníkům bezproblémový přístup k historickým záznamům, jako jsou staré noviny, které jsou uloženy jako PDF. V tomto projektu vytváří použití Wix, Velo a prvku HTML embed základ pro robustní systém.

Platforma Wix podporuje vložené prvky prostřednictvím prvků iframe, což uživatelům umožňuje přidávat interaktivní komponenty, jako jsou prohlížeče PDF. Tento prohlížeč PDF je vložený pomocí prvku iframe a aktuálně statická adresa URL definuje, který dokument se zobrazí. Potřeba dynamicky měnit soubor PDF na základě vstupu uživatele je však nezbytná pro bezproblémový provoz.

Úkolem je umožnit uživatelům vybrat rok a měsíc ze dvou rozevíracích nabídek, což následně spustí změnu v zobrazeném dokumentu PDF. To zahrnuje integraci zpráv JavaScriptu pro komunikaci s prvkem iframe, což umožňuje, aby se adresa URL dokumentu měnila podle výběru v rozevíracím seznamu.

Tento přístup nejen snižuje potřebu mnoha statických stránek Wix, ale také zjednodušuje přístup k archivu PDF knihovny. Níže prozkoumáme kroky a řešení potřebná k implementaci pomocí rámce Velo a JavaScriptu.

Příkaz	Příklad použití
PSPDFKit.load()	Tato metoda inicializuje prohlížeč PDF PSPDFKit uvnitř konkrétního kontejneru. Načte soubor PDF z poskytnuté adresy URL, takže jej lze zobrazit v prvku vložení. Je specifický pro JavaScriptovou knihovnu PSPDFKit, která je přizpůsobena pro vkládání a prohlížení PDF dokumentů.
postMessage()	Používá se ke komunikaci mezi nadřazeným oknem a vloženým prvkem iframe. V tomto kontextu odešle zprávu z hlavní stránky do prvku iframe a umožní prvku iframe aktualizovat jeho obsah (adresu URL PDF) na základě rozevíracího výběru.
window.addEventListener("message")	Tento posluchač událostí je přidán do prvku iframe, aby naslouchal zprávám odeslaným prostřednictvím postMessage(). Zpracuje zprávu tak, aby dynamicky načetla nový dokument PDF do prvku iframe na základě přijatých dat.
event.data	V rámci obslužné rutiny události zprávy obsahuje event.data data odeslaná z nadřazeného okna. V tomto případě obsahuje adresu URL vybraného souboru PDF, který se má načíst do prohlížeče PSPDFKit.
document.getElementById()	Tato metoda manipulace DOM načte prvek HTML podle jeho ID. Používá se k zachycení uživatelského vstupu z rozevíracích prvků, což umožňuje skriptu určit vybraný rok a měsíc pro aktualizaci URL adresy PDF.
DOMContentLoaded	Událost, která zajišťuje, že se JavaScript spustí až po úplném načtení modelu DOM. Tím se zabrání chybám při pokusu o přístup k prvkům DOM dříve, než existují.
addEventListener("change")	Tento posluchač událostí monitoruje všechny změny v rozbalovacích prvcích. Když uživatel vybere jiný rok nebo měsíc, funkce se spustí, aby aktualizovala URL PDF a načetla odpovídající dokument.
template literals	Šablonové literály (uzavřené zpětným zaškrtnutím) umožňují vkládání proměnných do řetězců, což usnadňuje dynamické generování adresy URL pro vybraný PDF. Například: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	Při inicializaci PSPDFKit kontejner určuje prvek HTML (podle ID), kde bude prohlížeč PDF vykreslen. To je nezbytné pro definování, kde se bude PDF na stránce zobrazovat.

Dynamické načítání PDF s rozevíracími výběry ve Wix

V tomto řešení používáme dvojici rozevíracích prvků na stránce Wix k dynamické úpravě adresy URL souboru PDF zobrazeného ve vloženém prvku iFrame. Tento systém je zvláště užitečný pro veřejné knihovny, které chtějí poskytnout snadný přístup k archivovaným novinovým PDF. Základní funkce jsou poháněny , která odesílá uživatelské výběry z rozevíracích seznamů do vloženého prohlížeče PDF. Prohlížeč PSPDFKit se používá k vykreslování PDF v rámci iFrame a my s prohlížečem manipulujeme tak, že měníme adresu URL na základě volby roku a měsíce uživatelem. To poskytuje efektivní způsob, jak zobrazit velké archivy bez vytváření více statických stránek Wix.

V první rozevírací nabídce se vybere rok a ve druhé se vybere měsíc. Když uživatel vybere obojí, systém vytvoří příslušnou adresu URL pro odpovídající soubor PDF. The Tato metoda je klíčová, protože načte nové PDF do iFrame na základě aktualizované adresy URL. Tato metoda je součástí knihovny PSPDFKit, která je na stránku vložena prostřednictvím externího skriptu. The API je také důležité v alternativním řešení, které umožňuje zasílání zpráv mezi nadřazenou stránkou a prvkem iframe. Odesláním zprávy obsahující novou adresu URL PDF do prvku iframe se prohlížeč PDF dynamicky aktualizuje.

Abychom zajistili, že skript běží pouze při plném načtení DOM, používáme událost. To zajišťuje, že rozevírací prvky a kontejner PSPDFKit jsou přístupné skriptu. Do každé rozbalovací nabídky také přidáváme posluchače událostí. Když uživatel vybere rok nebo měsíc, odpovídající posluchač událostí výběr zachytí a zavolá funkci, která znovu načte prohlížeč PDF se správnou adresou URL. To je řešeno pomocí jednoduché funkce, která používá šablonové literály k vytvoření adresy URL z vybraných hodnot v rozevíracích seznamech. Tato metoda je nejen snadno implementovatelná, ale také vysoce modulární, což umožňuje snadné aktualizace při přidávání nových archivů.

Ve druhém přístupu používáme pro komunikaci mezi nadřazenou stránkou a prvkem iFrame. Nadřazená stránka naslouchá změnám rozevíracího seznamu a odešle zprávu obsahující novou adresu URL PDF do prvku iFrame, který zprávu přijme pomocí posluchače událostí. Tato metoda je užitečná při práci s izolovanějšími prostředími, kde iframe nemůže přímo interagovat s DOM nadřazené stránky. Obě metody poskytují efektivní způsoby, jak dynamicky aktualizovat obsah vestavěného prohlížeče PDF, což snižuje potřebu více statických stránek a nabízí uživatelsky přívětivé procházení.

// 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šení dostupnosti archivu PDF pomocí zpráv Wix a JavaScript

Dalším důležitým hlediskem při používání rozevíracích prvků k dynamické úpravě vložené adresy URL PDF ve Wix je zajištění interakce mezi a hlavní stránka je efektivní. Zatímco zasílání zpráv JavaScript nám umožňuje posílat data mezi těmito dvěma komponentami, výkon a uživatelskou zkušenost lze zlepšit optimalizací způsobu, jakým výběr spouští aktualizace. Toho lze dosáhnout zrušením vstupu, což znamená, že systém aktualizuje prohlížeč PDF až poté, co uživatel dokončí výběr, nikoli při každé změně.

Dalším aspektem, který ještě nebyl pokryt, je . Vzhledem k tomu, že soubory PDF jsou hostovány na externím serveru (jako je Digital Ocean), je důležité zajistit, aby byl server nakonfigurován tak, aby umožňoval přístup z domény Wix. Pokud nejsou nastavení CORS serveru správně nakonfigurována, prohlížeč PDF nemusí být schopen načíst dokument, což může mít za následek chyby. Správná záhlaví CORS na serveru hostujícím soubory PDF jsou zásadní pro bezproblémovou integraci mezi těmito dvěma platformami.

Kromě toho můžete systém vylepšit přednačtením často používaných souborů PDF, abyste zkrátili dobu načítání. Strategie předběžného načítání jsou užitečné, když je pravděpodobné, že uživatel přechází mezi několika měsíci nebo roky. Uložením těchto souborů do mezipaměti prohlížeče bude následné načítání dokumentů rychlejší a poskytuje plynulejší uživatelský zážitek. To lze provést pomocí servisních pracovníků nebo jiných mechanismů ukládání do mezipaměti, které lze nastavit tak, aby předem načítaly soubory PDF, když uživatel prochází dostupnými možnostmi.

1. Jak přidám rozevírací selektory do Wix?
2. Pomocí editoru Wix můžete přidat rozevírací prvky a pomocí JavaScriptu je ovládat přiřazením jedinečných ID. Prvky rozevíracího seznamu spustí změny v URL URL PDF .
3. Co dělá příkaz udělat?
4. The metoda je zodpovědná za vykreslení prohlížeče PDF a načtení konkrétního souboru PDF do něj. Tato metoda je součástí knihovny PSPDFKit používané k dynamickému zobrazování souborů PDF.
5. Mohu použít pro cross-origin komunikaci?
6. Ano, API je speciálně navrženo pro komunikaci mezi různými zdroji, například mezi nadřazenou stránkou a prvkem iFrame, což je pro tuto implementaci klíčové.
7. Jak se vypořádám s chybami při načítání PDF?
8. Chyby můžete ošetřit přidáním a blokovat k zachytí všechny chyby, které se vyskytnou během procesu načítání, a zobrazí příslušné chybové hlášení.
9. Musím svůj server nakonfigurovat pro CORS?
10. Ano, pokud jsou vaše soubory PDF hostovány v jiné doméně, budete muset zajistit, aby byl server správně nastaven záhlaví, které webu Wix umožní přístup k dokumentům.

Toto řešení zjednodušuje proces zobrazování velkých archivů souborů PDF na jedné stránce. Pomocí dvou rozevíracích prvků pro výběr roku a měsíce můžeme dynamicky aktualizovat prohlížeč PDF bez vytváření více stránek Wix.

Kombinací flexibility rámce Velo se zasíláním zpráv JavaScriptu mezi rozevíracími seznamy a rámcem iFrame tato metoda poskytuje efektivní způsob, jak organizovat a prezentovat historická data. Je škálovatelný a uživatelsky přívětivý pro veřejně přístupné webové stránky, jako jsou archivy knihoven.