Integrating Dropdown-Driven PDF URL Switching in Wix Using JavaScript Messaging

Enhancing PDF Viewer Functionality on a Wix Library Site

Displaying a vast archive of PDF files in an organized and user-friendly manner is crucial for improving the user experience on a public library's website. The goal is to offer visitors seamless access to historical records like old newspapers, which are stored as PDFs. In this project, the use of Wix, Velo, and an HTML embed element creates the foundation for a robust system.

Wix's platform supports embedded elements through iframes, allowing users to add interactive components like PDF viewers. This PDF viewer is embedded using an iframe, and currently, a static URL defines which document is displayed. However, the need to dynamically change the PDF file based on user input is essential for a smooth experience.

The challenge is to allow users to select a year and a month from two dropdowns, which will then trigger a change in the PDF document displayed. This involves integrating JavaScript messaging to communicate with the iframe, enabling the URL of the document to change according to the dropdown selections.

This approach not only reduces the need for numerous static Wix pages but also simplifies access to the library’s PDF archive. Below, we explore the steps and solutions needed to implement this using the Velo framework and JavaScript.

Dynamic PDF Loading with Dropdown Selections in Wix

In this solution, we use a pair of dropdown elements on a Wix page to dynamically modify the URL of a PDF file displayed within an embedded iFrame. This system is particularly useful for public libraries looking to provide easy access to archived newspaper PDFs. The core functionality is powered by JavaScript messaging, which sends user selections from the dropdowns to the embedded PDF viewer. The PSPDFKit viewer is used to render the PDFs inside the iFrame, and we manipulate the viewer by altering the URL based on the user's choice of year and month. This provides a streamlined way to surface large archives without creating multiple static Wix pages.

The first dropdown selects the year, and the second dropdown selects the month. When the user selects both, the system constructs the appropriate URL for the corresponding PDF file. The PSPDFKit.load() method is central to this, as it loads the new PDF into the iFrame based on the updated URL. This method is part of the PSPDFKit library, which is embedded on the page through an external script. The postMessage() API is also critical in the alternative solution, which allows for messaging between the parent page and the iframe. By sending a message containing the new PDF URL to the iframe, the PDF viewer is updated dynamically.

To ensure that the script runs only when the DOM is fully loaded, we use the DOMContentLoaded event. This ensures that the dropdown elements and the PSPDFKit container are accessible to the script. We also add event listeners to each dropdown. When the user selects a year or month, the corresponding event listener captures the selection and calls a function to reload the PDF viewer with the correct URL. This is handled through a simple function that uses template literals to construct the URL from the selected values in the dropdowns. This method is not only easy to implement but also highly modular, allowing for easy updates as new archives are added.

In the second approach, we use postMessage() to communicate between the parent page and the iFrame. The parent page listens for dropdown changes and sends a message containing the new PDF URL to the iFrame, which receives the message using an event listener. This method is useful when dealing with more isolated environments where the iframe cannot directly interact with the parent page’s DOM. Both methods provide efficient ways to update the content of an embedded PDF viewer dynamically, reducing the need for multiple static pages and offering a user-friendly browsing experience.

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

Enhancing PDF Archive Accessibility with Wix and JavaScript Messaging

Another important consideration when using dropdown elements to dynamically modify an embedded PDF URL in Wix is ensuring that the interaction between the iFrame and the main page is efficient. While JavaScript messaging allows us to send data between these two components, the performance and user experience can be improved by optimizing how the selection triggers updates. This can be done by debouncing the input, meaning that the system only updates the PDF viewer after the user has completed their selection, rather than on each change.

Another aspect that hasn't been covered yet is cross-origin resource sharing (CORS). Since the PDFs are hosted on an external server (such as Digital Ocean), it's crucial to ensure that the server is configured to allow access from the Wix domain. If the server's CORS settings are not correctly configured, the PDF viewer may not be able to load the document, resulting in errors. Proper CORS headers on the server hosting the PDF files are essential for seamless integration between the two platforms.

Additionally, you can enhance the system by preloading frequently accessed PDF files to reduce loading times. Preloading strategies are useful when the user is likely to switch between multiple months or years. By storing these files in the browser's cache, subsequent document loads will be faster, providing a smoother user experience. This can be done using service workers or other caching mechanisms, which can be set up to preload PDFs as the user navigates through the available options.