Intégration du changement d'URL PDF basé sur la liste déroulante dans Wix à l'aide de la messagerie JavaScript

Améliorer la fonctionnalité de la visionneuse PDF sur un site de bibliothèque Wix

L'affichage d'une vaste archive de fichiers PDF de manière organisée et conviviale est crucial pour améliorer l'expérience utilisateur sur le site Web d'une bibliothèque publique. L'objectif est d'offrir aux visiteurs un accès transparent aux documents historiques tels que les vieux journaux, qui sont stockés au format PDF. Dans ce projet, l'utilisation de Wix, Velo et d'un élément d'intégration HTML crée la base d'un système robuste.

La plate-forme Wix prend en charge les éléments intégrés via des iframes, permettant aux utilisateurs d'ajouter des composants interactifs tels que des visionneuses PDF. Cette visionneuse PDF est intégrée à l'aide d'une iframe et actuellement, une URL statique définit quel document est affiché. Cependant, la nécessité de modifier dynamiquement le fichier PDF en fonction des entrées de l'utilisateur est essentielle pour une expérience fluide.

Le défi est de permettre aux utilisateurs de sélectionner une année et un mois dans deux listes déroulantes, ce qui déclenchera ensuite une modification du document PDF affiché. Cela implique d'intégrer la messagerie JavaScript pour communiquer avec l'iframe, permettant à l'URL du document de changer en fonction des sélections déroulantes.

Cette approche réduit non seulement le besoin de nombreuses pages Wix statiques, mais simplifie également l'accès aux archives PDF de la bibliothèque. Ci-dessous, nous explorons les étapes et les solutions nécessaires pour mettre en œuvre cela à l'aide du framework Velo et de JavaScript.

Commande	Exemple d'utilisation
PSPDFKit.load()	Cette méthode initialise la visionneuse PDF PSPDFKit dans un conteneur spécifique. Il charge un fichier PDF à partir de l'URL fournie, le rendant visible dans l'élément d'intégration. Il est spécifique à la bibliothèque JavaScript de PSPDFKit, conçue pour l'intégration et la visualisation de documents PDF.
postMessage()	Utilisé pour communiquer entre la fenêtre parent et une iframe intégrée. Dans ce contexte, il envoie un message de la page principale à l'iframe, permettant à l'iframe de mettre à jour son contenu (l'URL du PDF) en fonction des sélections déroulantes.
window.addEventListener("message")	Cet écouteur d'événements est ajouté à l'intérieur de l'iframe pour écouter les messages envoyés via postMessage(). Il traite le message pour charger dynamiquement un nouveau document PDF dans l'iframe en fonction des données reçues.
event.data	Dans le gestionnaire d'événements de message, event.data contient les données envoyées depuis la fenêtre parent. Dans ce cas, il inclut l'URL du fichier PDF sélectionné à charger dans la visionneuse PSPDFKit.
document.getElementById()	Cette méthode de manipulation DOM récupère un élément HTML par son ID. Il est utilisé pour capturer les entrées de l'utilisateur à partir des éléments déroulants, permettant au script de déterminer l'année et le mois sélectionnés pour la mise à jour de l'URL du PDF.
DOMContentLoaded	Un événement qui garantit que le JavaScript s'exécute uniquement une fois le DOM complètement chargé. Cela évite les erreurs lors de la tentative d'accès aux éléments DOM avant qu'ils n'existent.
addEventListener("change")	Cet écouteur d'événements surveille les éléments de la liste déroulante pour détecter toute modification. Lorsqu'un utilisateur sélectionne une année ou un mois différent, la fonction est déclenchée pour mettre à jour l'URL du PDF et charger le document correspondant.
template literals	Les littéraux de modèle (entourés de guillemets) permettent d'incorporer des variables dans des chaînes, ce qui facilite la génération dynamique de l'URL du PDF sélectionné. Par exemple : `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	Dans l'initialisation PSPDFKit, le conteneur spécifie l'élément HTML (par ID) où la visionneuse PDF sera rendue. Ceci est essentiel pour définir où le PDF sera affiché sur la page.

Chargement dynamique de PDF avec sélections déroulantes dans Wix

Dans cette solution, nous utilisons une paire d'éléments déroulants sur une page Wix pour modifier dynamiquement l'URL d'un fichier PDF affiché dans un iFrame intégré. Ce système est particulièrement utile pour les bibliothèques publiques qui cherchent à fournir un accès facile aux fichiers PDF de journaux archivés. La fonctionnalité de base est alimentée par , qui envoie les sélections de l'utilisateur dans les listes déroulantes à la visionneuse PDF intégrée. La visionneuse PSPDFKit est utilisée pour restituer les PDF à l'intérieur de l'iFrame, et nous manipulons la visionneuse en modifiant l'URL en fonction du choix de l'année et du mois par l'utilisateur. Cela fournit un moyen simplifié de faire apparaître des archives volumineuses sans créer plusieurs pages Wix statiques.

La première liste déroulante sélectionne l'année et la seconde liste déroulante sélectionne le mois. Lorsque l'utilisateur sélectionne les deux, le système construit l'URL appropriée pour le fichier PDF correspondant. Le La méthode est essentielle, car elle charge le nouveau PDF dans l'iFrame en fonction de l'URL mise à jour. Cette méthode fait partie de la bibliothèque PSPDFKit, qui est intégrée à la page via un script externe. Le L'API est également essentielle dans la solution alternative, qui permet la messagerie entre la page parent et l'iframe. En envoyant un message contenant la nouvelle URL PDF à l'iframe, la visionneuse PDF est mise à jour dynamiquement.

Pour garantir que le script ne s'exécute que lorsque le DOM est complètement chargé, nous utilisons le événement. Cela garantit que les éléments déroulants et le conteneur PSPDFKit sont accessibles au script. Nous ajoutons également des écouteurs d'événements à chaque liste déroulante. Lorsque l'utilisateur sélectionne une année ou un mois, l'écouteur d'événements correspondant capture la sélection et appelle une fonction pour recharger la visionneuse PDF avec l'URL correcte. Ceci est géré via une fonction simple qui utilise des littéraux de modèle pour construire l'URL à partir des valeurs sélectionnées dans les listes déroulantes. Cette méthode est non seulement facile à mettre en œuvre mais également hautement modulaire, permettant des mises à jour faciles à mesure que de nouvelles archives sont ajoutées.

Dans la deuxième approche, nous utilisons pour communiquer entre la page parent et l'iFrame. La page parent écoute les modifications apportées à la liste déroulante et envoie un message contenant la nouvelle URL du PDF à l'iFrame, qui reçoit le message à l'aide d'un écouteur d'événements. Cette méthode est utile lorsqu’il s’agit d’environnements plus isolés où l’iframe ne peut pas interagir directement avec le DOM de la page parent. Les deux méthodes offrent des moyens efficaces de mettre à jour dynamiquement le contenu d’une visionneuse PDF intégrée, réduisant ainsi le besoin de plusieurs pages statiques et offrant une expérience de navigation conviviale.

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

Améliorer l'accessibilité des archives PDF avec la messagerie Wix et JavaScript

Une autre considération importante lors de l'utilisation d'éléments déroulants pour modifier dynamiquement une URL PDF intégrée dans Wix est de garantir que l'interaction entre le et la page principale est efficace. Bien que la messagerie JavaScript nous permette d'envoyer des données entre ces deux composants, les performances et l'expérience utilisateur peuvent être améliorées en optimisant la manière dont la sélection déclenche les mises à jour. Cela peut être fait en anti-rebondissant l'entrée, ce qui signifie que le système ne met à jour la visionneuse PDF qu'une fois que l'utilisateur a terminé sa sélection, plutôt qu'à chaque modification.

Un autre aspect qui n'a pas encore été abordé est . Étant donné que les PDF sont hébergés sur un serveur externe (tel que Digital Ocean), il est crucial de s'assurer que le serveur est configuré pour autoriser l'accès depuis le domaine Wix. Si les paramètres CORS du serveur ne sont pas correctement configurés, la visionneuse PDF risque de ne pas pouvoir charger le document, ce qui entraînera des erreurs. Des en-têtes CORS appropriés sur le serveur hébergeant les fichiers PDF sont essentiels pour une intégration transparente entre les deux plates-formes.

De plus, vous pouvez améliorer le système en préchargeant les fichiers PDF fréquemment consultés afin de réduire les temps de chargement. Les stratégies de préchargement sont utiles lorsque l'utilisateur est susceptible de basculer entre plusieurs mois ou années. En stockant ces fichiers dans le cache du navigateur, les chargements ultérieurs des documents seront plus rapides, offrant ainsi une expérience utilisateur plus fluide. Cela peut être fait à l'aide de service Workers ou d'autres mécanismes de mise en cache, qui peuvent être configurés pour précharger les PDF lorsque l'utilisateur navigue dans les options disponibles.

1. Comment ajouter les sélecteurs déroulants dans Wix ?
2. Vous pouvez ajouter des éléments déroulants à l'aide de l'éditeur Wix et utiliser JavaScript pour les contrôler en attribuant des identifiants uniques. Les éléments déroulants déclencheront des modifications dans l'URL du PDF via .
3. Qu'est-ce que le la commande fait-elle ?
4. Le La méthode est responsable du rendu de la visionneuse PDF et du chargement d’un fichier PDF spécifique. Cette méthode fait partie de la bibliothèque PSPDFKit utilisée pour afficher les fichiers PDF de manière dynamique.
5. Puis-je utiliser pour une communication cross-origine ?
6. Oui, le L'API est spécifiquement conçue pour communiquer entre différentes origines, par exemple entre une page parent et un iFrame, ce qui est crucial pour cette implémentation.
7. Comment gérer les erreurs lors du chargement d’un PDF ?
8. Vous pouvez gérer les erreurs en ajoutant un bloquer vers le fonction pour détecter toutes les erreurs qui se produisent pendant le processus de chargement et afficher un message d’erreur approprié.
9. Dois-je configurer mon serveur pour CORS ?
10. Oui, si vos PDF sont hébergés sur un domaine différent, vous devrez vous assurer que le serveur est configuré avec les paramètres appropriés. en-têtes pour permettre au site Wix d'accéder aux documents.

Cette solution simplifie le processus d'affichage de grandes archives de fichiers PDF sur une seule page. En utilisant deux éléments déroulants pour sélectionner l'année et le mois, nous pouvons mettre à jour dynamiquement la visionneuse PDF sans créer plusieurs pages Wix.

Combinant la flexibilité du framework Velo avec la messagerie JavaScript entre les listes déroulantes et l'iFrame, cette méthode offre un moyen efficace d'organiser et de présenter les données historiques. Il est à la fois évolutif et convivial pour les sites Web publics comme les archives de bibliothèques.