Integrazione del cambio URL PDF guidato dal menu a discesa in Wix utilizzando la messaggistica JavaScript

Miglioramento della funzionalità del visualizzatore PDF su un sito di libreria Wix

Visualizzare un vasto archivio di file PDF in modo organizzato e facile da usare è fondamentale per migliorare l'esperienza dell'utente sul sito web di una biblioteca pubblica. L'obiettivo è offrire ai visitatori un accesso continuo a documenti storici come vecchi giornali, che vengono archiviati come PDF. In questo progetto, l'uso di Wix, Velo e un elemento di incorporamento HTML crea le basi per un sistema robusto.

La piattaforma Wix supporta elementi incorporati tramite iframe, consentendo agli utenti di aggiungere componenti interattivi come visualizzatori PDF. Questo visualizzatore PDF è incorporato utilizzando un iframe e attualmente un URL statico definisce quale documento viene visualizzato. Tuttavia, la necessità di modificare dinamicamente il file PDF in base all'input dell'utente è essenziale per un'esperienza fluida.

La sfida è consentire agli utenti di selezionare un anno e un mese da due menu a discesa, che poi attiveranno una modifica nel documento PDF visualizzato. Ciò comporta l'integrazione della messaggistica JavaScript per comunicare con l'iframe, consentendo all'URL del documento di cambiare in base alle selezioni del menu a discesa.

Questo approccio non solo riduce la necessità di numerose pagine Wix statiche, ma semplifica anche l'accesso all'archivio PDF della biblioteca. Di seguito, esploriamo i passaggi e le soluzioni necessarie per implementarlo utilizzando il framework Velo e JavaScript.

Comando	Esempio di utilizzo
PSPDFKit.load()	Questo metodo inizializza il visualizzatore PDF PSPDFKit all'interno di un contenitore specifico. Carica un file PDF dall'URL fornito, rendendolo visualizzabile all'interno dell'elemento incorporamento. È specifico per la libreria JavaScript di PSPDFKit, progettata su misura per incorporare e visualizzare documenti PDF.
postMessage()	Utilizzato per comunicare tra la finestra principale e un iframe incorporato. In questo contesto, invia un messaggio dalla pagina principale all'iframe, consentendo all'iframe di aggiornare il suo contenuto (l'URL del PDF) in base alle selezioni a discesa.
window.addEventListener("message")	Questo ascoltatore di eventi viene aggiunto all'interno dell'iframe per ascoltare i messaggi inviati tramite postMessage(). Elabora il messaggio per caricare dinamicamente un nuovo documento PDF nell'iframe in base ai dati ricevuti.
event.data	All'interno del gestore eventi del messaggio, event.data contiene i dati inviati dalla finestra principale. In questo caso, include l'URL del file PDF selezionato da caricare nel visualizzatore PSPDFKit.
document.getElementById()	Questo metodo di manipolazione DOM recupera un elemento HTML tramite il suo ID. Viene utilizzato per acquisire l'input dell'utente dagli elementi a discesa, consentendo allo script di determinare l'anno e il mese selezionati per l'aggiornamento dell'URL del PDF.
DOMContentLoaded	Un evento che garantisce che JavaScript venga eseguito solo dopo che il DOM è stato completamente caricato. Ciò impedisce errori quando si tenta di accedere agli elementi DOM prima che esistano.
addEventListener("change")	Questo ascoltatore di eventi monitora gli elementi a discesa per eventuali modifiche. Quando un utente seleziona un anno o un mese diverso, viene attivata la funzione per aggiornare l'URL del PDF e caricare il documento corrispondente.
template literals	I valori letterali del modello (racchiusi da apici inversi) consentono di incorporare variabili nelle stringhe, semplificando la generazione dinamica dell'URL per il PDF selezionato. Ad esempio: `https://dominio.tld/${anno}_${mese}_etc.pdf`.
container: "#pspdfkit"	Nell'inizializzazione PSPDFKit, il contenitore specifica l'elemento HTML (per ID) in cui verrà eseguito il rendering del visualizzatore PDF. Questo è essenziale per definire dove verrà visualizzato il PDF sulla pagina.

Caricamento dinamico dei PDF con selezioni a discesa in Wix

In questa soluzione, utilizziamo una coppia di elementi a discesa su una pagina Wix per modificare dinamicamente l'URL di un file PDF visualizzato all'interno di un iFrame incorporato. Questo sistema è particolarmente utile per le biblioteche pubbliche che desiderano fornire un facile accesso ai PDF dei giornali archiviati. La funzionalità principale è alimentata da , che invia le selezioni dell'utente dai menu a discesa al visualizzatore PDF incorporato. Il visualizzatore PSPDFKit viene utilizzato per eseguire il rendering dei PDF all'interno dell'iFrame e manipoliamo il visualizzatore alterando l'URL in base alla scelta dell'anno e del mese da parte dell'utente. Ciò fornisce un modo semplificato per far emergere archivi di grandi dimensioni senza creare più pagine Wix statiche.

Il primo menu a discesa seleziona l'anno e il secondo menu a discesa seleziona il mese. Quando l'utente li seleziona entrambi, il sistema crea l'URL appropriato per il file PDF corrispondente. IL Il metodo è fondamentale in questo senso, poiché carica il nuovo PDF nell'iFrame in base all'URL aggiornato. Questo metodo fa parte della libreria PSPDFKit, incorporata nella pagina tramite uno script esterno. IL L'API è fondamentale anche nella soluzione alternativa, che consente la messaggistica tra la pagina principale e l'iframe. Inviando un messaggio contenente il nuovo URL PDF all'iframe, il visualizzatore PDF viene aggiornato dinamicamente.

Per garantire che lo script venga eseguito solo quando il DOM è completamente caricato, utilizziamo il file evento. Ciò garantisce che gli elementi a discesa e il contenitore PSPDFKit siano accessibili allo script. Aggiungiamo anche ascoltatori di eventi a ciascun menu a discesa. Quando l'utente seleziona un anno o un mese, il corrispondente ascoltatore di eventi acquisisce la selezione e richiama una funzione per ricaricare il visualizzatore PDF con l'URL corretto. Questo viene gestito tramite una semplice funzione che utilizza i valori letterali del modello per costruire l'URL dai valori selezionati nei menu a discesa. Questo metodo non è solo facile da implementare ma anche altamente modulare, consentendo facili aggiornamenti man mano che vengono aggiunti nuovi archivi.

Nel secondo approccio, utilizziamo per comunicare tra la pagina principale e l'iFrame. La pagina principale ascolta le modifiche del menu a discesa e invia un messaggio contenente il nuovo URL PDF all'iFrame, che riceve il messaggio utilizzando un ascoltatore di eventi. Questo metodo è utile quando si ha a che fare con ambienti più isolati in cui l'iframe non può interagire direttamente con il DOM della pagina principale. Entrambi i metodi forniscono modi efficienti per aggiornare dinamicamente il contenuto di un visualizzatore PDF incorporato, riducendo la necessità di più pagine statiche e offrendo un'esperienza di navigazione intuitiva.

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

Migliorare l'accessibilità dell'archivio PDF con Wix e la messaggistica JavaScript

Un'altra considerazione importante quando si utilizzano elementi a discesa per modificare dinamicamente un URL PDF incorporato in Wix è garantire che l'interazione tra i file e la pagina principale è efficiente. Sebbene la messaggistica JavaScript ci consenta di inviare dati tra questi due componenti, le prestazioni e l'esperienza dell'utente possono essere migliorate ottimizzando il modo in cui la selezione attiva gli aggiornamenti. Ciò può essere fatto eliminando il rimbalzo dell'input, il che significa che il sistema aggiorna il visualizzatore PDF solo dopo che l'utente ha completato la selezione, anziché a ogni modifica.

Un altro aspetto che non è stato ancora trattato è . Poiché i PDF sono ospitati su un server esterno (come Digital Ocean), è fondamentale assicurarsi che il server sia configurato per consentire l'accesso dal dominio Wix. Se le impostazioni CORS del server non sono configurate correttamente, il visualizzatore PDF potrebbe non essere in grado di caricare il documento, causando errori. Le intestazioni CORS corrette sul server che ospita i file PDF sono essenziali per una perfetta integrazione tra le due piattaforme.

Inoltre, è possibile migliorare il sistema precaricando i file PDF a cui si accede di frequente per ridurre i tempi di caricamento. Le strategie di precaricamento sono utili quando è probabile che l'utente passi da un mese all'altro o da un anno all'altro. Memorizzando questi file nella cache del browser, i successivi caricamenti dei documenti saranno più veloci, garantendo un'esperienza utente più fluida. Questo può essere fatto utilizzando gli addetti ai servizi o altri meccanismi di memorizzazione nella cache, che possono essere impostati per precaricare i PDF mentre l'utente naviga tra le opzioni disponibili.

1. Come posso aggiungere i selettori a discesa in Wix?
2. Puoi aggiungere elementi a discesa utilizzando l'editor Wix e utilizzare JavaScript per controllarli assegnando ID univoci. Gli elementi a discesa attiveranno le modifiche nell'URL del PDF tramite .
3. Cosa significa il comando fare?
4. IL Il metodo è responsabile del rendering del visualizzatore PDF e del caricamento di un file PDF specifico al suo interno. Questo metodo fa parte della libreria PSPDFKit utilizzata per visualizzare dinamicamente i file PDF.
5. Posso usare per la comunicazione multiorigine?
6. Sì, il L'API è progettata specificamente per la comunicazione tra origini diverse, ad esempio tra una pagina principale e un iFrame, che è fondamentale per questa implementazione.
7. Come posso gestire gli errori durante il caricamento di un PDF?
8. È possibile gestire gli errori aggiungendo a blocco al funzione per rilevare eventuali errori che si verificano durante il processo di caricamento e visualizzare un messaggio di errore appropriato.
9. Devo configurare il mio server per CORS?
10. Sì, se i tuoi PDF sono ospitati su un dominio diverso, dovrai assicurarti che il server sia configurato correttamente intestazioni per consentire al sito Wix di accedere ai documenti.

Questa soluzione semplifica il processo di visualizzazione di grandi archivi di file PDF su un'unica pagina. Utilizzando due elementi a discesa per selezionare anno e mese, possiamo aggiornare dinamicamente il visualizzatore PDF senza creare più pagine Wix.

Combinando la flessibilità del framework Velo con la messaggistica JavaScript tra i menu a discesa e iFrame, questo metodo fornisce un modo efficiente per organizzare e presentare dati storici. È scalabile e facile da usare per i siti Web rivolti al pubblico come gli archivi delle biblioteche.