Integrando el cambio de URL de PDF mediante menú desplegable en Wix usando mensajería JavaScript

Mejorando la funcionalidad del visor de PDF en un sitio de la biblioteca Wix

Mostrar un gran archivo de archivos PDF de una manera organizada y fácil de usar es crucial para mejorar la experiencia del usuario en el sitio web de una biblioteca pública. El objetivo es ofrecer a los visitantes un acceso perfecto a registros históricos, como periódicos antiguos, que se almacenan en formato PDF. En este proyecto, el uso de Wix, Velo y un elemento de inserción HTML crea la base para un sistema sólido.

La plataforma de Wix admite elementos integrados a través de iframes, lo que permite a los usuarios agregar componentes interactivos como visores de PDF. Este visor de PDF está integrado mediante un iframe y, actualmente, una URL estática define qué documento se muestra. Sin embargo, la necesidad de cambiar dinámicamente el archivo PDF según la entrada del usuario es esencial para una experiencia fluida.

El desafío es permitir a los usuarios seleccionar un año y un mes de dos menús desplegables, lo que luego activará un cambio en el documento PDF mostrado. Esto implica integrar mensajes JavaScript para comunicarse con el iframe, permitiendo que la URL del documento cambie según las selecciones desplegables.

Este enfoque no sólo reduce la necesidad de numerosas páginas estáticas de Wix, sino que también simplifica el acceso al archivo PDF de la biblioteca. A continuación, exploramos los pasos y las soluciones necesarias para implementar esto utilizando el marco Velo y JavaScript.

Dominio	Ejemplo de uso
PSPDFKit.load()	Este método inicializa el visor de PDF PSPDFKit dentro de un contenedor específico. Carga un archivo PDF desde la URL proporcionada, haciéndolo visible dentro del elemento de inserción. Es específico de la biblioteca JavaScript de PSPDFKit, que está diseñada para incrustar y ver documentos PDF.
postMessage()	Se utiliza para comunicarse entre la ventana principal y un iframe incrustado. En este contexto, envía un mensaje desde la página principal al iframe, lo que permite que el iframe actualice su contenido (la URL del PDF) según las selecciones desplegables.
window.addEventListener("message")	Este detector de eventos se agrega dentro del iframe para escuchar los mensajes enviados a través de postMessage(). Procesa el mensaje para cargar dinámicamente un nuevo documento PDF en el iframe en función de los datos recibidos.
event.data	Dentro del controlador de eventos de mensajes, event.data contiene los datos enviados desde la ventana principal. En este caso, incluye la URL del archivo PDF seleccionado que se cargará en el visor PSPDFKit.
document.getElementById()	Este método de manipulación DOM recupera un elemento HTML por su ID. Se utiliza para capturar la entrada del usuario desde los elementos desplegables, lo que permite que el script determine el año y mes seleccionados para la actualización de la URL del PDF.
DOMContentLoaded	Un evento que garantiza que JavaScript se ejecute solo después de que el DOM se haya cargado por completo. Esto evita errores al intentar acceder a elementos DOM antes de que existan.
addEventListener("change")	Este detector de eventos monitorea los elementos desplegables para detectar cualquier cambio. Cuando un usuario selecciona un año o mes diferente, la función se activa para actualizar la URL del PDF y cargar el documento correspondiente.
template literals	Los literales de plantilla (entre comillas invertidas) permiten incrustar variables en cadenas, lo que facilita la generación dinámica de la URL para el PDF seleccionado. Por ejemplo: `https://dominio.tld/${año}_${mes}_etc.pdf`.
container: "#pspdfkit"	En la inicialización de PSPDFKit, el contenedor especifica el elemento HTML (por ID) donde se representará el visor de PDF. Esto es esencial para definir dónde se mostrará el PDF en la página.

Carga dinámica de PDF con selecciones desplegables en Wix

En esta solución, utilizamos un par de elementos desplegables en una página Wix para modificar dinámicamente la URL de un archivo PDF que se muestra dentro de un iFrame incrustado. Este sistema es particularmente útil para bibliotecas públicas que buscan brindar fácil acceso a archivos PDF de periódicos archivados. La funcionalidad principal está impulsada por , que envía las selecciones del usuario desde los menús desplegables al visor de PDF integrado. El visor PSPDFKit se utiliza para representar los archivos PDF dentro del iFrame, y manipulamos el visor alterando la URL según la elección del año y mes del usuario. Esto proporciona una forma simplificada de mostrar archivos grandes sin crear múltiples páginas Wix estáticas.

El primer menú desplegable selecciona el año y el segundo menú desplegable selecciona el mes. Cuando el usuario selecciona ambos, el sistema construye la URL adecuada para el archivo PDF correspondiente. El El método es fundamental para esto, ya que carga el nuevo PDF en el iFrame según la URL actualizada. Este método es parte de la biblioteca PSPDFKit, que está incrustada en la página mediante un script externo. El La API también es fundamental en la solución alternativa, que permite la mensajería entre la página principal y el iframe. Al enviar un mensaje que contiene la nueva URL del PDF al iframe, el visor de PDF se actualiza dinámicamente.

Para garantizar que el script se ejecute solo cuando el DOM esté completamente cargado, utilizamos el evento. Esto garantiza que el script pueda acceder a los elementos desplegables y al contenedor PSPDFKit. También agregamos detectores de eventos a cada menú desplegable. Cuando el usuario selecciona un año o mes, el detector de eventos correspondiente captura la selección y llama a una función para recargar el visor de PDF con la URL correcta. Esto se maneja mediante una función simple que utiliza literales de plantilla para construir la URL a partir de los valores seleccionados en los menús desplegables. Este método no sólo es fácil de implementar sino también altamente modular, lo que permite actualizaciones sencillas a medida que se agregan nuevos archivos.

En el segundo enfoque utilizamos para comunicarse entre la página principal y el iFrame. La página principal escucha los cambios en el menú desplegable y envía un mensaje que contiene la nueva URL del PDF al iFrame, que recibe el mensaje mediante un detector de eventos. Este método es útil cuando se trata de entornos más aislados donde el iframe no puede interactuar directamente con el DOM de la página principal. Ambos métodos proporcionan formas eficientes de actualizar dinámicamente el contenido de un visor de PDF integrado, lo que reduce la necesidad de múltiples páginas estáticas y ofrece una experiencia de navegación fácil de usar.

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

Mejora de la accesibilidad del archivo PDF con Wix y mensajería JavaScript

Otra consideración importante al usar elementos desplegables para modificar dinámicamente una URL de PDF incrustada en Wix es garantizar que la interacción entre los y la página principal es eficiente. Si bien la mensajería JavaScript nos permite enviar datos entre estos dos componentes, el rendimiento y la experiencia del usuario se pueden mejorar optimizando cómo la selección activa las actualizaciones. Esto se puede hacer eliminando el rebote de la entrada, lo que significa que el sistema solo actualiza el visor de PDF después de que el usuario haya completado su selección, en lugar de cada cambio.

Otro aspecto que aún no se ha cubierto es . Dado que los archivos PDF están alojados en un servidor externo (como Digital Ocean), es crucial asegurarse de que el servidor esté configurado para permitir el acceso desde el dominio Wix. Si la configuración CORS del servidor no está configurada correctamente, es posible que el visor de PDF no pueda cargar el documento, lo que provocará errores. Los encabezados CORS adecuados en el servidor que aloja los archivos PDF son esenciales para una integración perfecta entre las dos plataformas.

Además, puede mejorar el sistema precargando los archivos PDF a los que se accede con frecuencia para reducir los tiempos de carga. Las estrategias de precarga son útiles cuando es probable que el usuario cambie entre varios meses o años. Al almacenar estos archivos en la memoria caché del navegador, las cargas de documentos posteriores serán más rápidas, lo que brindará una experiencia de usuario más fluida. Esto se puede hacer utilizando trabajadores de servicio u otros mecanismos de almacenamiento en caché, que se pueden configurar para precargar archivos PDF a medida que el usuario navega por las opciones disponibles.

1. ¿Cómo agrego los selectores desplegables en Wix?
2. Puedes agregar elementos desplegables usando el editor de Wix y usar JavaScript para controlarlos asignando ID únicas. Los elementos desplegables activarán cambios en la URL del PDF a través de .
3. ¿Qué hace el comando hacer?
4. El El método es responsable de representar el visor de PDF y cargar un archivo PDF específico en él. Este método es parte de la biblioteca PSPDFKit que se utiliza para mostrar archivos PDF de forma dinámica.
5. ¿Puedo usar para la comunicación entre orígenes?
6. Si, el La API está diseñada específicamente para la comunicación entre diferentes orígenes, como entre una página principal y un iFrame, lo cual es crucial para esta implementación.
7. ¿Cómo manejo los errores al cargar un PDF?
8. Puede manejar errores agregando un bloquear al función para detectar cualquier error que ocurra durante el proceso de carga y mostrar un mensaje de error apropiado.
9. ¿Necesito configurar mi servidor para CORS?
10. Sí, si sus archivos PDF están alojados en un dominio diferente, deberá asegurarse de que el servidor esté configurado con la configuración adecuada. encabezados para permitir que el sitio Wix acceda a los documentos.

Esta solución simplifica el proceso de mostrar grandes archivos de archivos PDF en una sola página. Al usar dos elementos desplegables para seleccionar año y mes, podemos actualizar dinámicamente el visor de PDF sin crear múltiples páginas Wix.

Al combinar la flexibilidad del marco Velo con mensajes JavaScript entre menús desplegables y iFrame, este método proporciona una forma eficiente de organizar y presentar datos históricos. Es escalable y fácil de usar para sitios web públicos como archivos de bibliotecas.