Pudotusvalikossa ohjatun PDF-URL-osoitteen vaihtamisen integrointi Wixissä JavaScript-viestien avulla

PDF-katseluohjelman toiminnallisuuden parantaminen Wix-kirjastosivustolla

Laajan PDF-tiedostojen arkiston näyttäminen järjestetyllä ja käyttäjäystävällisellä tavalla on ratkaisevan tärkeää yleisen kirjaston verkkosivuston käyttökokemuksen parantamiseksi. Tavoitteena on tarjota kävijöille saumaton pääsy historiallisiin asiakirjoihin, kuten vanhoihin sanomalehtiin, jotka tallennetaan PDF-tiedostoina. Tässä projektissa Wixin, Velon ja HTML-upotuselementin käyttö luo pohjan vankalle järjestelmälle.

Wixin alusta tukee upotettuja elementtejä iframe-kehysten kautta, jolloin käyttäjät voivat lisätä interaktiivisia komponentteja, kuten PDF-katseluohjelmia. Tämä PDF-katseluohjelma on upotettu iframe-kehyksen avulla, ja tällä hetkellä staattinen URL-osoite määrittää, mikä asiakirja näytetään. Tarve muuttaa PDF-tiedostoa dynaamisesti käyttäjän syötteen perusteella on kuitenkin välttämätöntä sujuvan käyttökokemuksen kannalta.

Haasteena on antaa käyttäjille mahdollisuus valita vuosi ja kuukausi kahdesta avattavasta valikosta, mikä sitten käynnistää muutoksen näytettävässä PDF-asiakirjassa. Tämä edellyttää JavaScript-viestien integroimista kommunikoimaan iframe-kehyksen kanssa, jolloin asiakirjan URL-osoite voi muuttua pudotusvalikon valintojen mukaan.

Tämä lähestymistapa ei ainoastaan ​​vähennä lukuisten staattisten Wix-sivujen tarvetta, vaan myös yksinkertaistaa kirjaston PDF-arkiston käyttöä. Alla tutkimme vaiheita ja ratkaisuja, joita tarvitaan tämän toteuttamiseen Velo-kehyksen ja JavaScriptin avulla.

Dynaaminen PDF-lataus pudotusvalikosta Wixissä

Tässä ratkaisussa käytämme Wix-sivun pudotusvalikon elementtiparia dynaamisesti muokkaamaan upotetussa iFrame-kehyksessä näytettävän PDF-tiedoston URL-osoitetta. Tämä järjestelmä on erityisen hyödyllinen yleisille kirjastoille, jotka haluavat tarjota helpon pääsyn arkistoituihin sanomalehtien PDF-tiedostoihin. Ydintoiminnot saavat virtansa JavaScript-viestit, joka lähettää käyttäjän valinnat avattavista valikoista upotettuun PDF-katseluohjelmaan. PSPDFKit-katseluohjelmaa käytetään PDF-tiedostojen hahmontamiseen iFramen sisällä, ja me muokkaamme katseluohjelmaa muuttamalla URL-osoitetta käyttäjän vuoden ja kuukauden valinnan perusteella. Tämä tarjoaa virtaviivaistetun tavan käsitellä suuria arkistoja luomatta useita staattisia Wix-sivuja.

Ensimmäinen avattava valikko valitsee vuoden ja toinen avattava valikko kuukauden. Kun käyttäjä valitsee molemmat, järjestelmä muodostaa sopivan URL-osoitteen vastaavalle PDF-tiedostolle. The PSPDFKit.load() menetelmä on keskeinen tässä, koska se lataa uuden PDF-tiedoston iFrameen päivitetyn URL-osoitteen perusteella. Tämä menetelmä on osa PSPDFKit-kirjastoa, joka on upotettu sivulle ulkoisen komentosarjan kautta. The postMessage() API on kriittinen myös vaihtoehtoisessa ratkaisussa, joka mahdollistaa viestinnän pääsivun ja iframe-kehyksen välillä. Lähettämällä viestin, joka sisältää uuden PDF-URL-osoitteen iframe-kehykseen, PDF-katseluohjelma päivitetään dynaamisesti.

Varmistaaksemme, että komentosarja toimii vain, kun DOM on ladattu täyteen, käytämme DOMContentLoaded tapahtuma. Tämä varmistaa, että pudotusvalikkoelementit ja PSPDFKit-säilö ovat skriptin käytettävissä. Lisäämme myös tapahtumakuuntelijoita jokaiseen pudotusvalikkoon. Kun käyttäjä valitsee vuoden tai kuukauden, vastaava tapahtuman kuuntelija kaappaa valinnan ja kutsuu toiminnon ladatakseen PDF-katseluohjelman uudelleen oikealla URL-osoitteella. Tämä hoidetaan yksinkertaisella funktiolla, joka käyttää malliliteraaleja URL-osoitteen muodostamiseen pudotusvalikoissa valituista arvoista. Tämä menetelmä ei ole vain helppo toteuttaa, vaan se on myös erittäin modulaarinen, mikä mahdollistaa helpon päivityksen, kun uusia arkistoja lisätään.

Toisessa lähestymistavassa käytämme postMessage() kommunikoidaksesi pääsivun ja iFramen välillä. Pääsivu kuuntelee pudotusvalikon muutoksia ja lähettää uuden PDF-URL-osoitteen sisältävän viestin iFrameen, joka vastaanottaa viestin tapahtumaseurannan avulla. Tämä menetelmä on hyödyllinen, kun käsitellään eristetympiä ympäristöjä, joissa iframe ei voi olla suoraan vuorovaikutuksessa pääsivun DOM:n kanssa. Molemmat menetelmät tarjoavat tehokkaita tapoja päivittää upotetun PDF-katseluohjelman sisältöä dynaamisesti, mikä vähentää useiden staattisten sivujen tarvetta ja tarjoaa käyttäjäystävällisen selauskokemuksen.

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

PDF-arkiston käytettävyyden parantaminen Wix- ja JavaScript-viestien avulla

Toinen tärkeä seikka käytettäessä avattavia elementtejä upotetun PDF-URL-osoitteen dynaamiseen muokkaamiseen Wixissä on varmistaa, että iFrame ja pääsivu on tehokas. Vaikka JavaScript-viestien avulla voimme lähettää tietoja näiden kahden komponentin välillä, suorituskykyä ja käyttökokemusta voidaan parantaa optimoimalla, kuinka valinta käynnistää päivitykset. Tämä voidaan tehdä poistamalla syöte, mikä tarkoittaa, että järjestelmä päivittää PDF-katseluohjelman vasta sen jälkeen, kun käyttäjä on tehnyt valintansa, eikä jokaisen muutoksen yhteydessä.

Toinen näkökohta, jota ei ole vielä käsitelty, on cross-origin resurssien jakaminen (CORS). Koska PDF-tiedostoja isännöidään ulkoisella palvelimella (kuten Digital Ocean), on erittäin tärkeää varmistaa, että palvelin on määritetty sallimaan pääsy Wix-verkkotunnuksesta. Jos palvelimen CORS-asetuksia ei ole määritetty oikein, PDF-katseluohjelma ei ehkä pysty lataamaan asiakirjaa, mikä johtaa virheisiin. Asianmukaiset CORS-otsikot PDF-tiedostoja isännöivällä palvelimella ovat välttämättömiä kahden alustan saumattomalle integroinnille.

Lisäksi voit parantaa järjestelmää esilataamalla usein käytettyjä PDF-tiedostoja lyhentääksesi latausaikoja. Esilatausstrategiat ovat hyödyllisiä, kun käyttäjä todennäköisesti vaihtaa useiden kuukausien tai vuosien välillä. Tallentamalla nämä tiedostot selaimen välimuistiin, myöhemmät asiakirjojen lataukset ovat nopeampia, mikä tarjoaa sujuvamman käyttökokemuksen. Tämä voidaan tehdä käyttämällä palvelutyöntekijöitä tai muita välimuistimekanismeja, jotka voidaan asettaa esilataamaan PDF-tiedostoja, kun käyttäjä selaa käytettävissä olevia vaihtoehtoja.