Nolaižamā PDF URL pārslēgšanas integrēšana programmā Wix, izmantojot JavaScript ziņojumapmaiņu

PDF skatītāja funkcionalitātes uzlabošana Wix bibliotēkas vietnē

Plaša PDF failu arhīva sakārtota un lietotājam draudzīga parādīšana ir ļoti svarīga, lai uzlabotu lietotāju pieredzi publiskās bibliotēkas vietnē. Mērķis ir piedāvāt apmeklētājiem netraucētu piekļuvi vēsturiskiem ierakstiem, piemēram, veciem laikrakstiem, kas tiek glabāti kā PDF faili. Šajā projektā Wix, Velo un HTML iegulšanas elementa izmantošana rada pamatu spēcīgai sistēmai.

Wix platforma atbalsta iegultos elementus, izmantojot iframe, ļaujot lietotājiem pievienot interaktīvus komponentus, piemēram, PDF skatītājus. Šis PDF skatītājs ir iegults, izmantojot iframe, un pašlaik statisks URL nosaka, kurš dokuments tiek rādīts. Tomēr nepieciešamība dinamiski mainīt PDF failu, pamatojoties uz lietotāja ievadi, ir būtiska vienmērīgai pieredzei.

Izaicinājums ir ļaut lietotājiem izvēlēties gadu un mēnesi no diviem nolaižamajiem izvēlnēm, kas pēc tam aktivizēs izmaiņas parādītajā PDF dokumentā. Tas ietver JavaScript ziņojumapmaiņas integrēšanu, lai sazinātos ar iframe, ļaujot mainīt dokumenta URL atbilstoši nolaižamajā izvēlnē.

Šī pieeja ne tikai samazina vajadzību pēc daudzām statiskām Wix lapām, bet arī vienkāršo piekļuvi bibliotēkas PDF arhīvam. Tālāk mēs izpētām darbības un risinājumus, kas nepieciešami, lai to ieviestu, izmantojot Velo sistēmu un JavaScript.

Pavēli	Lietošanas piemērs
PSPDFKit.load()	Šī metode inicializē PSPDFKit PDF skatītāju noteiktā konteinerā. Tas ielādē PDF failu no norādītā URL, padarot to skatāmu iegulšanas elementā. Tas ir raksturīgs PSPDFKit JavaScript bibliotēkai, kas ir pielāgota PDF dokumentu iegulšanai un skatīšanai.
postMessage()	Izmanto, lai sazinātos starp vecāklogu un iegulto iframe. Šajā kontekstā tas nosūta ziņojumu no galvenās lapas uz iframe, ļaujot iframe atjaunināt savu saturu (PDF URL), pamatojoties uz nolaižamās izvēlnes atlasi.
window.addEventListener("message")	Šis notikumu uztvērējs ir pievienots iframe, lai klausītos ziņojumus, kas nosūtīti, izmantojot postMessage(). Tas apstrādā ziņojumu, lai dinamiski ielādētu jaunu PDF dokumentu iframe, pamatojoties uz saņemtajiem datiem.
event.data	Ziņojuma notikumu apdarinātājā event.data ir dati, kas nosūtīti no vecākloga. Šajā gadījumā tajā ir iekļauts atlasītā PDF faila URL, kas jāielādē PSPDFKit skatītājā.
document.getElementById()	Šī DOM manipulācijas metode izgūst HTML elementu pēc tā ID. To izmanto, lai tvertu lietotāja ievadi no nolaižamajiem elementiem, ļaujot skriptam noteikt PDF URL atjaunināšanai atlasīto gadu un mēnesi.
DOMContentLoaded	Notikums, kas nodrošina JavaScript izpildi tikai pēc tam, kad DOM ir pilnībā ielādēts. Tas novērš kļūdas, mēģinot piekļūt DOM elementiem, pirms tie pastāv.
addEventListener("change")	Šis notikumu uztvērējs uzrauga nolaižamās izvēlnes elementus, lai atklātu jebkādas izmaiņas. Kad lietotājs izvēlas citu gadu vai mēnesi, tiek aktivizēta funkcija, lai atjauninātu PDF URL un ielādētu atbilstošo dokumentu.
template literals	Veidņu literāļi (ietverot ar atzīmes) ļauj iegult mainīgos lielumus virknēs, atvieglojot atlasītā PDF URL dinamisku ģenerēšanu. Piemēram: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	PSPDFKit inicializācijā konteiners norāda HTML elementu (pēc ID), kurā tiks renderēts PDF skatītājs. Tas ir būtiski, lai noteiktu, kur lapā tiks parādīts PDF fails.

Dinamiskā PDF ielāde, izmantojot Wix nolaižamās izvēlnes

Šajā risinājumā mēs Wix lapā izmantojam pāris nolaižamo elementu, lai dinamiski modificētu iegultā iFrame redzamā PDF faila URL. Šī sistēma ir īpaši noderīga publiskajām bibliotēkām, kuras vēlas nodrošināt vieglu piekļuvi arhivētiem laikrakstu PDF failiem. Pamatfunkciju nodrošina , kas nolaiž lietotāju atlasi no nolaižamajām izvēlnēm uz iegulto PDF skatītāju. PSPDFKit skatītājs tiek izmantots, lai renderētu PDF failus iFrame iekšpusē, un mēs manipulējam ar skatītāju, mainot URL, pamatojoties uz lietotāja gada un mēneša izvēli. Tas nodrošina racionalizētu veidu, kā ievietot lielus arhīvus, neveidojot vairākas statiskas Wix lapas.

Pirmajā nolaižamajā izvēlnē tiek atlasīts gads, bet otrajā - mēnesis. Kad lietotājs atlasa abus, sistēma attiecīgajam PDF failam izveido atbilstošo URL. The metode ir galvenā, jo tā ielādē jauno PDF failu iFrame, pamatojoties uz atjaunināto URL. Šī metode ir daļa no PSPDFKit bibliotēkas, kas ir iegulta lapā, izmantojot ārēju skriptu. The API ir ļoti svarīga arī alternatīvajā risinājumā, kas nodrošina ziņojumapmaiņu starp vecāklapu un iframe. Nosūtot ziņojumu ar jauno PDF URL uz iframe, PDF skatītājs tiek dinamiski atjaunināts.

Lai nodrošinātu, ka skripts darbojas tikai tad, kad DOM ir pilnībā ielādēts, mēs izmantojam notikumu. Tas nodrošina, ka skriptam ir pieejami nolaižamās izvēlnes elementi un PSPDFKit konteiners. Katrai nolaižamajai izvēlnei pievienojam arī notikumu klausītājus. Kad lietotājs izvēlas gadu vai mēnesi, atbilstošais notikumu uztvērējs tver atlasi un izsauc funkciju, lai atkārtoti ielādētu PDF skatītāju ar pareizo URL. Tas tiek darīts, izmantojot vienkāršu funkciju, kas izmanto veidņu literāļus, lai izveidotu URL no atlasītajām vērtībām nolaižamajos izvēlnēs. Šī metode ir ne tikai viegli īstenojama, bet arī ļoti modulāra, kas ļauj viegli atjaunināt, pievienojot jaunus arhīvus.

Otrajā pieejā mēs izmantojam lai sazinātos starp vecāklapu un iFrame. Vecākā lapa uzklausa nolaižamās izvēlnes izmaiņas un nosūta ziņojumu ar jauno PDF URL uz iFrame, kas saņem ziņojumu, izmantojot notikumu uztvērēju. Šī metode ir noderīga, strādājot ar izolētākām vidēm, kurās iframe nevar tieši mijiedarboties ar vecāklapas DOM. Abas metodes nodrošina efektīvus veidus, kā dinamiski atjaunināt iegultā PDF skatītāja saturu, samazinot vajadzību pēc vairākām statiskām lapām un piedāvājot lietotājam draudzīgu pārlūkošanas pieredzi.

// 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 arhīva pieejamības uzlabošana, izmantojot Wix un JavaScript ziņojumapmaiņu

Vēl viens svarīgs apsvērums, izmantojot nolaižamās izvēlnes elementus, lai dinamiski modificētu iegulto PDF URL programmā Wix, ir nodrošināt mijiedarbību starp un galvenā lapa ir efektīva. Lai gan JavaScript ziņojumapmaiņa ļauj mums sūtīt datus starp šiem diviem komponentiem, veiktspēju un lietotāja pieredzi var uzlabot, optimizējot to, kā atlase aktivizē atjauninājumus. To var izdarīt, atmetot ievadi, kas nozīmē, ka sistēma atjaunina PDF skatītāju tikai pēc tam, kad lietotājs ir pabeidzis atlasi, nevis pēc katras izmaiņas.

Vēl viens aspekts, kas vēl nav apskatīts, ir . Tā kā PDF faili tiek mitināti ārējā serverī (piemēram, Digital Ocean), ir ļoti svarīgi nodrošināt, lai serveris būtu konfigurēts tā, lai atļautu piekļuvi no Wix domēna. Ja servera CORS iestatījumi nav pareizi konfigurēti, PDF skatītājs, iespējams, nevarēs ielādēt dokumentu, kā rezultātā rodas kļūdas. Pareizas CORS galvenes serverī, kurā tiek mitināti PDF faili, ir būtiskas, lai netraucētu integrāciju starp abām platformām.

Turklāt jūs varat uzlabot sistēmu, iepriekš ielādējot bieži piekļūtos PDF failus, lai samazinātu ielādes laiku. Iepriekšējas ielādes stratēģijas ir noderīgas, ja lietotājs var pārslēgties starp vairākiem mēnešiem vai gadiem. Saglabājot šos failus pārlūkprogrammas kešatmiņā, turpmākā dokumentu ielāde būs ātrāka, nodrošinot vienmērīgāku lietotāja pieredzi. To var izdarīt, izmantojot servisa darbiniekus vai citus kešatmiņas mehānismus, kurus var iestatīt, lai pirmsielādētu PDF failus, lietotājam pārvietojoties pa pieejamajām opcijām.

1. Kā Wix pievienot nolaižamos atlasītājus?
2. Varat pievienot nolaižamās izvēlnes elementus, izmantojot Wix redaktoru, un izmantot JavaScript, lai tos kontrolētu, piešķirot unikālus ID. Nolaižamie elementi aktivizēs izmaiņas PDF URL caur .
3. Ko dara pavēli darīt?
4. The metode ir atbildīga par PDF skatītāja renderēšanu un konkrēta PDF faila ielādi tajā. Šī metode ir daļa no PSPDFKit bibliotēkas, ko izmanto, lai dinamiski parādītu PDF failus.
5. Vai es varu izmantot savstarpējai saziņai?
6. Jā, API ir īpaši izstrādāta saziņai starp dažādām izcelsmēm, piemēram, starp vecāklapu un iFrame, kas ir ļoti svarīga šai ieviešanai.
7. Kā rīkoties ar kļūdām, ielādējot PDF failu?
8. Varat rīkoties ar kļūdām, pievienojot a bloķēt uz funkcija, lai uztvertu visas kļūdas, kas rodas ielādes procesa laikā, un parādītu atbilstošu kļūdas ziņojumu.
9. Vai man ir jākonfigurē mans serveris CORS?
10. Jā, ja jūsu PDF faili tiek mitināti citā domēnā, jums būs jānodrošina, lai serveris būtu pareizi iestatīts galvenes, lai ļautu Wix vietnei piekļūt dokumentiem.

Šis risinājums vienkāršo lielu PDF failu arhīvu parādīšanu vienā lapā. Izmantojot divus nolaižamās izvēlnes elementus gada un mēneša izvēlei, mēs varam dinamiski atjaunināt PDF skatītāju, neveidojot vairākas Wix lapas.

Apvienojot Velo ietvara elastību ar JavaScript ziņojumapmaiņu starp nolaižamajām izvēlnēm un iFrame, šī metode nodrošina efektīvu veidu, kā organizēt un prezentēt vēsturiskos datus. Tas ir gan mērogojams, gan lietotājam draudzīgs publiskām vietnēm, piemēram, bibliotēku arhīviem.