Integrarea comutării URL PDF determinată de dropdown în Wix folosind mesageria JavaScript

Îmbunătățirea funcționalității PDF Viewer pe un site de bibliotecă Wix

Afișarea unei arhive vaste de fișiere PDF într-un mod organizat și ușor de utilizat este crucială pentru îmbunătățirea experienței utilizatorului pe site-ul unei biblioteci publice. Scopul este de a oferi vizitatorilor acces fără probleme la înregistrări istorice, cum ar fi ziarele vechi, care sunt stocate ca fișiere PDF. În acest proiect, utilizarea Wix, Velo și a unui element de încorporare HTML creează baza unui sistem robust.

Platforma Wix acceptă elemente încorporate prin iframe, permițând utilizatorilor să adauge componente interactive, cum ar fi vizualizatoare PDF. Acest vizualizator PDF este încorporat folosind un iframe, iar în prezent, o adresă URL statică definește ce document este afișat. Cu toate acestea, necesitatea de a schimba dinamic fișierul PDF pe baza intrărilor utilizatorului este esențială pentru o experiență fără probleme.

Provocarea este de a permite utilizatorilor să selecteze un an și o lună din două meniuri derulante, care vor declanșa apoi o modificare a documentului PDF afișat. Aceasta implică integrarea mesajelor JavaScript pentru a comunica cu iframe, permițând modificarea adresei URL a documentului în funcție de selecțiile drop-down.

Această abordare nu numai că reduce nevoia de numeroase pagini Wix statice, dar simplifică și accesul la arhiva PDF a bibliotecii. Mai jos, explorăm pașii și soluțiile necesare pentru a implementa acest lucru folosind cadrul Velo și JavaScript.

Încărcare PDF dinamică cu selecții drop-down în Wix

În această soluție, folosim o pereche de elemente drop-down pe o pagină Wix pentru a modifica în mod dinamic adresa URL a unui fișier PDF afișat într-un iFrame încorporat. Acest sistem este deosebit de util pentru bibliotecile publice care doresc să ofere acces facil la PDF-urile de ziare arhivate. Funcționalitatea de bază este alimentată de Mesaje JavaScript, care trimite selecțiile utilizatorilor din meniurile derulante către vizualizatorul PDF încorporat. Vizualizatorul PSPDFKit este folosit pentru a reda fișierele PDF în interiorul iFrame și manipulăm vizualizatorul modificând adresa URL în funcție de alegerea utilizatorului privind anul și luna. Aceasta oferă o modalitate simplificată de a suprafață arhive mari fără a crea mai multe pagini Wix statice.

Primul meniu derulant selectează anul, iar al doilea meniu derulant selectează luna. Când utilizatorul le selectează pe ambele, sistemul construiește adresa URL corespunzătoare pentru fișierul PDF corespunzător. The PSPDFKit.load() metoda este esențială pentru aceasta, deoarece încarcă noul PDF în iFrame pe baza URL-ului actualizat. Această metodă face parte din biblioteca PSPDFKit, care este încorporată în pagină printr-un script extern. The postMessage() API-ul este, de asemenea, critic în soluția alternativă, care permite mesajele între pagina părinte și iframe. Prin trimiterea unui mesaj care conține noua adresă URL PDF către iframe, vizualizatorul PDF este actualizat dinamic.

Pentru a ne asigura că scriptul rulează numai atunci când DOM-ul este complet încărcat, folosim DOMCContentLoaded eveniment. Acest lucru asigură că elementele derulante și containerul PSPDFKit sunt accesibile scriptului. Adăugăm, de asemenea, ascultători de evenimente la fiecare meniu vertical. Când utilizatorul selectează un an sau o lună, ascultătorul de eveniment corespunzător captează selecția și apelează o funcție pentru a reîncărca vizualizatorul PDF cu adresa URL corectă. Acest lucru este gestionat printr-o funcție simplă care utilizează literale șablon pentru a construi adresa URL din valorile selectate în meniurile derulante. Această metodă nu este doar ușor de implementat, ci și foarte modulară, permițând actualizări ușoare pe măsură ce se adaugă noi arhive.

În a doua abordare, folosim postMessage() pentru a comunica între pagina părinte și iFrame. Pagina părinte ascultă modificările din meniul derulant și trimite un mesaj care conține noua adresă URL PDF către iFrame, care primește mesajul folosind un ascultător de evenimente. Această metodă este utilă atunci când aveți de-a face cu medii mai izolate în care iframe-ul nu poate interacționa direct cu DOM-ul paginii părinte. Ambele metode oferă modalități eficiente de a actualiza în mod dinamic conținutul unui vizualizator PDF încorporat, reducând nevoia de mai multe pagini statice și oferind o experiență de navigare ușor de utilizat.

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

Îmbunătățirea accesibilității arhivelor PDF cu mesaje Wix și JavaScript

O altă considerație importantă atunci când utilizați elemente derulante pentru a modifica dinamic o adresă URL PDF încorporată în Wix este asigurarea faptului că interacțiunea dintre iFrame iar pagina principală este eficientă. În timp ce mesageria JavaScript ne permite să trimitem date între aceste două componente, performanța și experiența utilizatorului pot fi îmbunătățite prin optimizarea modului în care selecția declanșează actualizări. Acest lucru se poate face prin eliminarea intrării, ceea ce înseamnă că sistemul actualizează vizualizatorul PDF numai după ce utilizatorul a finalizat selecția, mai degrabă decât la fiecare modificare.

Un alt aspect care nu a fost încă acoperit este partajarea resurselor între origini (CORS). Deoarece PDF-urile sunt găzduite pe un server extern (cum ar fi Digital Ocean), este esențial să vă asigurați că serverul este configurat pentru a permite accesul de pe domeniul Wix. Dacă setările CORS ale serverului nu sunt configurate corect, este posibil ca vizualizatorul PDF să nu poată încărca documentul, ceea ce duce la erori. Anteturile CORS adecvate de pe serverul care găzduiește fișierele PDF sunt esențiale pentru integrarea perfectă între cele două platforme.

În plus, puteți îmbunătăți sistemul prin preîncărcarea fișierelor PDF accesate frecvent pentru a reduce timpii de încărcare. Strategiile de preîncărcare sunt utile atunci când este posibil ca utilizatorul să treacă între mai multe luni sau ani. Prin stocarea acestor fișiere în memoria cache a browserului, încărcările ulterioare ale documentelor vor fi mai rapide, oferind o experiență mai fluidă pentru utilizator. Acest lucru se poate face folosind lucrători de service sau alte mecanisme de stocare în cache, care pot fi configurate pentru a preîncărca PDF-urile pe măsură ce utilizatorul navighează prin opțiunile disponibile.