Integració del canvi d'URL de PDF basat en desplegables a Wix mitjançant missatgeria JavaScript

Millora de la funcionalitat del visualitzador de PDF en un lloc de biblioteca de Wix

Mostrar un ampli arxiu de fitxers PDF d'una manera organitzada i fàcil d'utilitzar és crucial per millorar l'experiència de l'usuari al lloc web d'una biblioteca pública. L'objectiu és oferir als visitants un accés perfecte a registres històrics com ara diaris antics, que s'emmagatzemen com a PDF. En aquest projecte, l'ús de Wix, Velo i un element incrustat HTML crea la base per a un sistema robust.

La plataforma de Wix admet elements incrustats mitjançant iframes, cosa que permet als usuaris afegir components interactius com ara visualitzadors de PDF. Aquest visualitzador de PDF s'incrusta mitjançant un iframe i, actualment, un URL estàtic defineix quin document es mostra. Tanmateix, la necessitat de canviar dinàmicament el fitxer PDF en funció de l'entrada de l'usuari és essencial per a una experiència fluida.

El repte és permetre als usuaris seleccionar un any i un mes entre dos menús desplegables, cosa que provocarà un canvi en el document PDF que es mostra. Això implica integrar missatgeria JavaScript per comunicar-se amb l'iframe, permetent que l'URL del document canviï segons les seleccions desplegables.

Aquest enfocament no només redueix la necessitat de nombroses pàgines Wix estàtiques, sinó que també simplifica l'accés a l'arxiu PDF de la biblioteca. A continuació, explorem els passos i les solucions necessàries per implementar-ho mitjançant el framework Velo i JavaScript.

Càrrega dinàmica de PDF amb seleccions desplegables a Wix

En aquesta solució, utilitzem un parell d'elements desplegables en una pàgina de Wix per modificar dinàmicament l'URL d'un fitxer PDF que es mostra dins d'un iFrame incrustat. Aquest sistema és especialment útil per a les biblioteques públiques que busquen proporcionar un accés fàcil als PDF de diaris arxivats. La funcionalitat bàsica està impulsada per Missatgeria JavaScript, que envia les seleccions d'usuari dels menús desplegables al visualitzador de PDF incrustat. El visualitzador PSPDFKit s'utilitza per representar els PDF dins de l'iFrame, i manipulem el visualitzador alterant l'URL en funció de l'any i el mes que l'usuari triï. Això proporciona una manera simplificada de mostrar arxius grans sense crear diverses pàgines Wix estàtiques.

El primer desplegable selecciona l'any i el segon desplegable selecciona el mes. Quan l'usuari selecciona tots dos, el sistema construeix l'URL adequat per al fitxer PDF corresponent. El PSPDFKit.load() El mètode és fonamental per a això, ja que carrega el nou PDF a l'iFrame en funció de l'URL actualitzat. Aquest mètode forma part de la biblioteca PSPDFKit, que s'incrusta a la pàgina mitjançant un script extern. El postMessage() L'API també és fonamental en la solució alternativa, que permet enviar missatges entre la pàgina principal i l'iframe. En enviar un missatge que conté la nova URL del PDF a l'iframe, el visualitzador de PDF s'actualitza de manera dinàmica.

Per assegurar-nos que l'script només s'executa quan el DOM està completament carregat, fem servir el DOMContentLoaded esdeveniment. Això garanteix que els elements desplegables i el contenidor PSPDFKit siguin accessibles per a l'script. També afegim oients d'esdeveniments a cada menú desplegable. Quan l'usuari selecciona un any o un mes, l'oient d'esdeveniments corresponent captura la selecció i crida a una funció per tornar a carregar el visualitzador de PDF amb l'URL correcte. Això es gestiona mitjançant una funció senzilla que utilitza literals de plantilla per construir l'URL a partir dels valors seleccionats als menús desplegables. Aquest mètode no només és fàcil d'implementar, sinó també molt modular, la qual cosa permet actualitzacions fàcils a mesura que s'afegeixen nous arxius.

En el segon enfocament, fem servir postMessage() per comunicar-se entre la pàgina principal i l'iFrame. La pàgina principal escolta els canvis del menú desplegable i envia un missatge que conté l'URL PDF nou a l'iFrame, que rep el missatge mitjançant un escolta d'esdeveniments. Aquest mètode és útil quan es tracta d'entorns més aïllats on l'iframe no pot interactuar directament amb el DOM de la pàgina principal. Tots dos mètodes ofereixen maneres eficients d'actualitzar el contingut d'un visor de PDF incrustat de manera dinàmica, reduint la necessitat de diverses pàgines estàtiques i oferint una experiència de navegació fàcil d'utilitzar.

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

Millora de l'accessibilitat de l'arxiu PDF amb missatgeria Wix i JavaScript

Una altra consideració important a l'hora d'utilitzar elements desplegables per modificar dinàmicament un URL PDF incrustat a Wix és assegurar-se que la interacció entre iFrame i la pàgina principal és eficient. Tot i que la missatgeria JavaScript ens permet enviar dades entre aquests dos components, el rendiment i l'experiència de l'usuari es poden millorar optimitzant com la selecció activa les actualitzacions. Això es pot fer eliminant l'entrada, el que significa que el sistema només actualitza el visualitzador de PDF després que l'usuari hagi completat la selecció, en lloc de cada canvi.

Un altre aspecte que encara no s'ha tractat és compartició de recursos entre orígens (CORS). Com que els PDF s'allotgen en un servidor extern (com ara Digital Ocean), és crucial assegurar-se que el servidor estigui configurat per permetre l'accés des del domini Wix. Si la configuració CORS del servidor no està correctament configurada, és possible que el visualitzador de PDF no pugui carregar el document, cosa que provocarà errors. Les capçaleres CORS adequades al servidor que allotja els fitxers PDF són essencials per a una integració perfecta entre les dues plataformes.

A més, podeu millorar el sistema carregant prèviament els fitxers PDF d'accés freqüent per reduir els temps de càrrega. Les estratègies de càrrega prèvia són útils quan és probable que l'usuari canviï entre diversos mesos o anys. En emmagatzemar aquests fitxers a la memòria cau del navegador, les càrregues de documents posteriors seran més ràpides, proporcionant una experiència d'usuari més fluida. Això es pot fer mitjançant treballadors del servei o altres mecanismes de memòria cau, que es poden configurar per carregar prèviament els PDF a mesura que l'usuari navega per les opcions disponibles.