Integratie van dropdown-gestuurde PDF-URL-wisseling in Wix met behulp van JavaScript-berichten

Verbetering van de functionaliteit van de PDF-viewer op een Wix-bibliotheeksite

Het op een georganiseerde en gebruiksvriendelijke manier weergeven van een enorm archief aan PDF-bestanden is van cruciaal belang voor het verbeteren van de gebruikerservaring op de website van een openbare bibliotheek. Het doel is om bezoekers naadloze toegang te bieden tot historische documenten zoals oude kranten, die zijn opgeslagen als pdf. In dit project creëert het gebruik van Wix, Velo en een HTML-insluitelement de basis voor een robuust systeem.

Het platform van Wix ondersteunt ingebedde elementen via iframes, waardoor gebruikers interactieve componenten zoals PDF-viewers kunnen toevoegen. Deze PDF-viewer is ingesloten met behulp van een iframe en momenteel bepaalt een statische URL welk document wordt weergegeven. De noodzaak om het PDF-bestand dynamisch te wijzigen op basis van gebruikersinvoer is echter essentieel voor een soepele ervaring.

De uitdaging is om gebruikers in staat te stellen een jaar en een maand te selecteren uit twee vervolgkeuzelijsten, die vervolgens een wijziging in het weergegeven PDF-document teweegbrengen. Dit omvat het integreren van JavaScript-berichten om met het iframe te communiceren, waardoor de URL van het document kan veranderen op basis van de vervolgkeuzelijsten.

Deze aanpak vermindert niet alleen de behoefte aan talloze statische Wix-pagina's, maar vereenvoudigt ook de toegang tot het PDF-archief van de bibliotheek. Hieronder onderzoeken we de stappen en oplossingen die nodig zijn om dit te implementeren met behulp van het Velo-framework en JavaScript.

Dynamisch PDF-laden met vervolgkeuzemenu's in Wix

In deze oplossing gebruiken we een paar dropdown-elementen op een Wix-pagina om de URL van een PDF-bestand dat wordt weergegeven in een ingesloten iFrame dynamisch te wijzigen. Dit systeem is vooral handig voor openbare bibliotheken die gemakkelijke toegang willen bieden tot gearchiveerde kranten-pdf's. De kernfunctionaliteit wordt mogelijk gemaakt door JavaScript-berichten, waarmee gebruikersselecties uit de vervolgkeuzelijsten naar de ingesloten PDF-viewer worden verzonden. De PSPDFKit-viewer wordt gebruikt om de PDF's binnen het iFrame weer te geven, en we manipuleren de viewer door de URL te wijzigen op basis van de door de gebruiker gekozen jaar en maand. Dit biedt een gestroomlijnde manier om grote archieven naar boven te halen zonder meerdere statische Wix-pagina's te maken.

De eerste vervolgkeuzelijst selecteert het jaar en de tweede vervolgkeuzelijst selecteert de maand. Wanneer de gebruiker beide selecteert, construeert het systeem de juiste URL voor het overeenkomstige PDF-bestand. De PSPDFKit.load() hierbij staat de methode centraal, omdat deze de nieuwe PDF in het iFrame laadt op basis van de bijgewerkte URL. Deze methode maakt deel uit van de PSPDFKit-bibliotheek, die via een extern script op de pagina is ingesloten. De postBericht() API is ook van cruciaal belang in de alternatieve oplossing, die berichtenuitwisseling tussen de bovenliggende pagina en het iframe mogelijk maakt. Door een bericht met de nieuwe PDF-URL naar het iframe te sturen, wordt de PDF-viewer dynamisch bijgewerkt.

Om ervoor te zorgen dat het script alleen wordt uitgevoerd als de DOM volledig is geladen, gebruiken we de DOMContentGeladen evenement. Dit zorgt ervoor dat de vervolgkeuzelijstelementen en de PSPDFKit-container toegankelijk zijn voor het script. We voegen ook gebeurtenislisteners toe aan elke vervolgkeuzelijst. Wanneer de gebruiker een jaar of maand selecteert, legt de bijbehorende gebeurtenislistener de selectie vast en roept een functie aan om de PDF-viewer opnieuw te laden met de juiste URL. Dit wordt afgehandeld via een eenvoudige functie die sjabloonletterlijke waarden gebruikt om de URL samen te stellen op basis van de geselecteerde waarden in de vervolgkeuzelijsten. Deze methode is niet alleen eenvoudig te implementeren, maar ook zeer modulair, waardoor eenvoudige updates mogelijk zijn als er nieuwe archieven worden toegevoegd.

In de tweede benadering gebruiken we postBericht() om te communiceren tussen de bovenliggende pagina en het iFrame. De bovenliggende pagina luistert naar wijzigingen in de vervolgkeuzelijst en verzendt een bericht met de nieuwe PDF-URL naar het iFrame, dat het bericht ontvangt met behulp van een gebeurtenislistener. Deze methode is handig bij het omgaan met meer geïsoleerde omgevingen waarin het iframe niet rechtstreeks kan communiceren met de DOM van de bovenliggende pagina. Beide methoden bieden efficiënte manieren om de inhoud van een ingebedde PDF-viewer dynamisch bij te werken, waardoor de behoefte aan meerdere statische pagina's wordt verminderd en een gebruiksvriendelijke browse-ervaring wordt geboden.

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

Verbetering van de toegankelijkheid van PDF-archief met Wix en JavaScript Messaging

Een andere belangrijke overweging bij het gebruik van dropdown-elementen om een ​​ingesloten PDF-URL in Wix dynamisch te wijzigen, is ervoor te zorgen dat de interactie tussen de iFrame en de hoofdpagina is efficiënt. Hoewel JavaScript-berichten ons in staat stellen gegevens tussen deze twee componenten te verzenden, kunnen de prestaties en de gebruikerservaring worden verbeterd door te optimaliseren hoe de selectie updates activeert. Dit kan worden gedaan door de invoer te debouncen, wat betekent dat het systeem de PDF-viewer pas bijwerkt nadat de gebruiker zijn selectie heeft voltooid, en niet bij elke wijziging.

Een ander aspect dat nog niet aan bod is gekomen is Cross-Original Resource Sharing (CORS). Omdat de PDF's worden gehost op een externe server (zoals Digital Ocean), is het van cruciaal belang om ervoor te zorgen dat de server is geconfigureerd om toegang vanuit het Wix-domein toe te staan. Als de CORS-instellingen van de server niet correct zijn geconfigureerd, kan de PDF-viewer het document mogelijk niet laden, wat tot fouten kan leiden. Goede CORS-headers op de server die de PDF-bestanden host, zijn essentieel voor een naadloze integratie tussen de twee platforms.

Bovendien kunt u het systeem uitbreiden door veelgebruikte PDF-bestanden vooraf te laden om de laadtijden te verkorten. Strategieën voor het vooraf laden zijn handig wanneer de gebruiker waarschijnlijk tussen meerdere maanden of jaren zal wisselen. Door deze bestanden in de cache van de browser op te slaan, zullen de volgende documenten sneller worden geladen, wat een soepelere gebruikerservaring oplevert. Dit kan worden gedaan met behulp van servicemedewerkers of andere cachingmechanismen, die kunnen worden ingesteld om PDF's vooraf te laden terwijl de gebruiker door de beschikbare opties navigeert.