Ενσωμάτωση Αναπτυσσόμενης Εναλλαγής URL PDF στο Wix με χρήση μηνυμάτων JavaScript

Βελτίωση της λειτουργικότητας του προγράμματος προβολής PDF σε έναν ιστότοπο βιβλιοθήκης Wix

Η εμφάνιση ενός τεράστιου αρχείου αρχείων PDF με οργανωμένο και φιλικό προς τον χρήστη τρόπο είναι ζωτικής σημασίας για τη βελτίωση της εμπειρίας χρήστη στον ιστότοπο μιας δημόσιας βιβλιοθήκης. Ο στόχος είναι να προσφέρει στους επισκέπτες απρόσκοπτη πρόσβαση σε ιστορικά αρχεία όπως παλιές εφημερίδες, τα οποία αποθηκεύονται ως PDF. Σε αυτό το έργο, η χρήση των Wix, Velo και ενός στοιχείου ενσωμάτωσης HTML δημιουργεί τα θεμέλια για ένα ισχυρό σύστημα.

Η πλατφόρμα του Wix υποστηρίζει ενσωματωμένα στοιχεία μέσω iframes, επιτρέποντας στους χρήστες να προσθέτουν διαδραστικά στοιχεία όπως προγράμματα προβολής PDF. Αυτό το πρόγραμμα προβολής PDF είναι ενσωματωμένο χρησιμοποιώντας ένα iframe και επί του παρόντος, μια στατική διεύθυνση URL ορίζει ποιο έγγραφο θα εμφανίζεται. Ωστόσο, η ανάγκη δυναμικής αλλαγής του αρχείου PDF με βάση τα δεδομένα χρήστη είναι απαραίτητη για μια ομαλή εμπειρία.

Η πρόκληση είναι να επιτραπεί στους χρήστες να επιλέξουν ένα έτος και ένα μήνα από δύο αναπτυσσόμενα μενού, τα οποία στη συνέχεια θα ενεργοποιήσουν μια αλλαγή στο έγγραφο PDF που εμφανίζεται. Αυτό περιλαμβάνει την ενσωμάτωση μηνυμάτων JavaScript για την επικοινωνία με το iframe, επιτρέποντας στη διεύθυνση URL του εγγράφου να αλλάζει σύμφωνα με τις αναπτυσσόμενες επιλογές.

Αυτή η προσέγγιση όχι μόνο μειώνει την ανάγκη για πολλές στατικές σελίδες Wix αλλά και απλοποιεί την πρόσβαση στο αρχείο PDF της βιβλιοθήκης. Παρακάτω, διερευνούμε τα βήματα και τις λύσεις που απαιτούνται για την εφαρμογή αυτού χρησιμοποιώντας το πλαίσιο Velo και τη JavaScript.

Δυναμική φόρτωση PDF με αναπτυσσόμενες επιλογές στο Wix

Σε αυτήν τη λύση, χρησιμοποιούμε ένα ζεύγος αναπτυσσόμενων στοιχείων σε μια σελίδα Wix για να τροποποιήσουμε δυναμικά τη διεύθυνση URL ενός αρχείου PDF που εμφανίζεται σε ένα ενσωματωμένο iFrame. Αυτό το σύστημα είναι ιδιαίτερα χρήσιμο για δημόσιες βιβλιοθήκες που επιθυμούν να παρέχουν εύκολη πρόσβαση σε αρχεία PDF αρχειοθετημένων εφημερίδων. Η βασική λειτουργικότητα τροφοδοτείται από Μηνύματα JavaScript, το οποίο στέλνει τις επιλογές του χρήστη από τα αναπτυσσόμενα μενού στο ενσωματωμένο πρόγραμμα προβολής PDF. Το πρόγραμμα προβολής PSPDFKit χρησιμοποιείται για την απόδοση των αρχείων PDF μέσα στο iFrame και χειριζόμαστε το πρόγραμμα προβολής αλλάζοντας τη διεύθυνση URL με βάση την επιλογή του έτους και του μήνα από τον χρήστη. Αυτό παρέχει έναν απλοποιημένο τρόπο για την εμφάνιση μεγάλων αρχείων χωρίς τη δημιουργία πολλαπλών στατικών σελίδων Wix.

Το πρώτο αναπτυσσόμενο μενού επιλέγει το έτος και το δεύτερο αναπτυσσόμενο μενού επιλέγει τον μήνα. Όταν ο χρήστης επιλέξει και τα δύο, το σύστημα κατασκευάζει την κατάλληλη διεύθυνση URL για το αντίστοιχο αρχείο PDF. Ο PSPDFKit.load() Η μέθοδος είναι κεντρική σε αυτό, καθώς φορτώνει το νέο PDF στο iFrame με βάση την ενημερωμένη διεύθυνση URL. Αυτή η μέθοδος είναι μέρος της βιβλιοθήκης PSPDFKit, η οποία είναι ενσωματωμένη στη σελίδα μέσω μιας εξωτερικής δέσμης ενεργειών. Ο postMessage() Το API είναι επίσης κρίσιμο στην εναλλακτική λύση, η οποία επιτρέπει την ανταλλαγή μηνυμάτων μεταξύ της γονικής σελίδας και του iframe. Με την αποστολή ενός μηνύματος που περιέχει τη νέα διεύθυνση URL PDF στο iframe, το πρόγραμμα προβολής PDF ενημερώνεται δυναμικά.

Για να διασφαλίσουμε ότι το σενάριο εκτελείται μόνο όταν το DOM έχει φορτωθεί πλήρως, χρησιμοποιούμε το DOMContentLoaded συμβάν. Αυτό διασφαλίζει ότι τα αναπτυσσόμενα στοιχεία και το κοντέινερ PSPDFKit είναι προσβάσιμα στο σενάριο. Προσθέτουμε επίσης προγράμματα ακρόασης συμβάντων σε κάθε αναπτυσσόμενο μενού. Όταν ο χρήστης επιλέξει ένα έτος ή ένα μήνα, το αντίστοιχο πρόγραμμα ακρόασης συμβάντος καταγράφει την επιλογή και καλεί μια συνάρτηση για να φορτώσει ξανά το πρόγραμμα προβολής PDF με τη σωστή διεύθυνση URL. Αυτό αντιμετωπίζεται μέσω μιας απλής συνάρτησης που χρησιμοποιεί κυριολεκτικά πρότυπα για τη δημιουργία της διεύθυνσης URL από τις επιλεγμένες τιμές στα αναπτυσσόμενα μενού. Αυτή η μέθοδος δεν είναι μόνο εύκολη στην εφαρμογή αλλά και εξαιρετικά αρθρωτή, επιτρέποντας εύκολες ενημερώσεις καθώς προστίθενται νέα αρχεία.

Στη δεύτερη προσέγγιση, χρησιμοποιούμε postMessage() για επικοινωνία μεταξύ της γονικής σελίδας και του iFrame. Η γονική σελίδα ακούει τις αναπτυσσόμενες αλλαγές και στέλνει ένα μήνυμα που περιέχει τη νέα διεύθυνση URL PDF στο iFrame, το οποίο λαμβάνει το μήνυμα χρησιμοποιώντας μια συσκευή ακρόασης συμβάντων. Αυτή η μέθοδος είναι χρήσιμη όταν αντιμετωπίζετε πιο απομονωμένα περιβάλλοντα όπου το iframe δεν μπορεί να αλληλεπιδράσει απευθείας με το DOM της γονικής σελίδας. Και οι δύο μέθοδοι παρέχουν αποτελεσματικούς τρόπους δυναμικής ενημέρωσης του περιεχομένου ενός ενσωματωμένου προγράμματος προβολής PDF, μειώνοντας την ανάγκη για πολλές στατικές σελίδες και προσφέροντας μια φιλική προς το χρήστη εμπειρία περιήγησης.

// 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 με Wix και JavaScript Messaging

Μια άλλη σημαντική παράμετρος κατά τη χρήση αναπτυσσόμενων στοιχείων για τη δυναμική τροποποίηση μιας ενσωματωμένης διεύθυνσης URL PDF στο Wix είναι η διασφάλιση ότι η αλληλεπίδραση μεταξύ των iFrame και η κύρια σελίδα είναι αποτελεσματική. Ενώ η ανταλλαγή μηνυμάτων JavaScript μας επιτρέπει να στέλνουμε δεδομένα μεταξύ αυτών των δύο στοιχείων, η απόδοση και η εμπειρία χρήστη μπορούν να βελτιωθούν βελτιστοποιώντας τον τρόπο με τον οποίο η επιλογή ενεργοποιεί ενημερώσεις. Αυτό μπορεί να γίνει με την αφαίρεση της εισόδου, πράγμα που σημαίνει ότι το σύστημα ενημερώνει το πρόγραμμα προβολής PDF μόνο αφού ο χρήστης ολοκληρώσει την επιλογή του και όχι για κάθε αλλαγή.

Μια άλλη πτυχή που δεν έχει καλυφθεί ακόμα είναι κοινή χρήση πόρων μεταξύ προέλευσης (CORS). Δεδομένου ότι τα PDF φιλοξενούνται σε έναν εξωτερικό διακομιστή (όπως το Digital Ocean), είναι σημαντικό να διασφαλίσετε ότι ο διακομιστής έχει ρυθμιστεί ώστε να επιτρέπει την πρόσβαση από τον τομέα Wix. Εάν οι ρυθμίσεις CORS του διακομιστή δεν έχουν διαμορφωθεί σωστά, το πρόγραμμα προβολής PDF ενδέχεται να μην μπορεί να φορτώσει το έγγραφο, με αποτέλεσμα να προκύψουν σφάλματα. Οι κατάλληλες κεφαλίδες CORS στον διακομιστή που φιλοξενεί τα αρχεία PDF είναι απαραίτητες για την απρόσκοπτη ενοποίηση μεταξύ των δύο πλατφορμών.

Επιπλέον, μπορείτε να βελτιώσετε το σύστημα προφορτώνοντας αρχεία PDF στα οποία έχετε συχνά πρόσβαση για να μειώσετε τους χρόνους φόρτωσης. Οι στρατηγικές προφόρτωσης είναι χρήσιμες όταν ο χρήστης είναι πιθανό να κάνει εναλλαγή μεταξύ πολλών μηνών ή ετών. Με την αποθήκευση αυτών των αρχείων στην κρυφή μνήμη του προγράμματος περιήγησης, οι επόμενες φορτώσεις εγγράφων θα είναι ταχύτερες, παρέχοντας μια πιο ομαλή εμπειρία χρήστη. Αυτό μπορεί να γίνει χρησιμοποιώντας υπαλλήλους υπηρεσιών ή άλλους μηχανισμούς προσωρινής αποθήκευσης, οι οποίοι μπορούν να ρυθμιστούν για προφόρτωση αρχείων PDF καθώς ο χρήστης περιηγείται στις διαθέσιμες επιλογές.