Integrando a troca de URL de PDF baseada em menu suspenso no Wix usando mensagens JavaScript

Aprimorando a funcionalidade do visualizador de PDF em um site da biblioteca Wix

Exibir um vasto arquivo de arquivos PDF de forma organizada e fácil de usar é crucial para melhorar a experiência do usuário no site de uma biblioteca pública. O objetivo é oferecer aos visitantes acesso contínuo a registros históricos, como jornais antigos, armazenados em PDF. Neste projeto, o uso de Wix, Velo e um elemento HTML incorporado cria a base para um sistema robusto.

A plataforma Wix suporta elementos incorporados através de iframes, permitindo aos usuários adicionar componentes interativos como visualizadores de PDF. Este visualizador de PDF é incorporado usando um iframe e, atualmente, uma URL estática define qual documento será exibido. No entanto, a necessidade de alterar dinamicamente o arquivo PDF com base na entrada do usuário é essencial para uma experiência tranquila.

O desafio é permitir que os usuários selecionem um ano e um mês em dois menus suspensos, o que acionará uma alteração no documento PDF exibido. Isso envolve a integração de mensagens JavaScript para comunicação com o iframe, permitindo que a URL do documento mude de acordo com as seleções suspensas.

Essa abordagem não apenas reduz a necessidade de inúmeras páginas Wix estáticas, mas também simplifica o acesso ao arquivo PDF da biblioteca. Abaixo, exploramos as etapas e soluções necessárias para implementar isso usando a estrutura Velo e JavaScript.

Carregamento dinâmico de PDF com seleções suspensas no Wix

Nesta solução, usamos um par de elementos suspensos em uma página Wix para modificar dinamicamente a URL de um arquivo PDF exibido em um iFrame incorporado. Este sistema é particularmente útil para bibliotecas públicas que procuram fornecer acesso fácil a PDFs de jornais arquivados. A funcionalidade principal é alimentada por Mensagens JavaScript, que envia as seleções do usuário dos menus suspensos para o visualizador de PDF incorporado. O visualizador PSPDFKit é usado para renderizar os PDFs dentro do iFrame, e manipulamos o visualizador alterando a URL com base na escolha de ano e mês do usuário. Isso fornece uma maneira simplificada de exibir arquivos grandes sem criar várias páginas Wix estáticas.

O primeiro menu suspenso seleciona o ano e o segundo menu suspenso seleciona o mês. Quando o usuário seleciona ambos, o sistema constrói a URL apropriada para o arquivo PDF correspondente. O PSPDFKit.load() O método é fundamental para isso, pois carrega o novo PDF no iFrame com base no URL atualizado. Este método faz parte da biblioteca PSPDFKit, que é incorporada à página por meio de um script externo. O postMessage() A API também é crítica na solução alternativa, que permite mensagens entre a página pai e o iframe. Ao enviar uma mensagem contendo a nova URL do PDF para o iframe, o visualizador de PDF é atualizado dinamicamente.

Para garantir que o script seja executado somente quando o DOM estiver totalmente carregado, usamos o comando DOMContentLoaded evento. Isso garante que os elementos suspensos e o contêiner PSPDFKit estejam acessíveis ao script. Também adicionamos ouvintes de eventos a cada menu suspenso. Quando o usuário seleciona um ano ou mês, o ouvinte de evento correspondente captura a seleção e chama uma função para recarregar o visualizador de PDF com a URL correta. Isso é feito por meio de uma função simples que usa literais de modelo para construir a URL a partir dos valores selecionados nos menus suspensos. Este método não é apenas fácil de implementar, mas também altamente modular, permitindo atualizações fáceis à medida que novos arquivos são adicionados.

Na segunda abordagem, usamos postMessage() para comunicação entre a página pai e o iFrame. A página pai escuta alterações no menu suspenso e envia uma mensagem contendo o novo URL do PDF para o iFrame, que recebe a mensagem usando um ouvinte de evento. Este método é útil ao lidar com ambientes mais isolados onde o iframe não pode interagir diretamente com o DOM da página pai. Ambos os métodos fornecem maneiras eficientes de atualizar dinamicamente o conteúdo de um visualizador de PDF incorporado, reduzindo a necessidade de múltiplas páginas estáticas e oferecendo uma experiência de navegação amigável.

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

Melhorando a acessibilidade de arquivos PDF com mensagens Wix e JavaScript

Outra consideração importante ao usar elementos suspensos para modificar dinamicamente uma URL de PDF incorporada no Wix é garantir que a interação entre o iFrame e a página principal é eficiente. Embora as mensagens JavaScript nos permitam enviar dados entre esses dois componentes, o desempenho e a experiência do usuário podem ser melhorados otimizando a forma como a seleção aciona atualizações. Isso pode ser feito eliminando a entrada, o que significa que o sistema só atualiza o visualizador de PDF depois que o usuário conclui sua seleção, e não a cada alteração.

Outro aspecto que ainda não foi abordado é compartilhamento de recursos de origem cruzada (CORS). Como os PDFs estão hospedados em um servidor externo (como o Digital Ocean), é crucial garantir que o servidor esteja configurado para permitir o acesso a partir do domínio Wix. Se as configurações de CORS do servidor não estiverem configuradas corretamente, o visualizador de PDF poderá não conseguir carregar o documento, resultando em erros. Cabeçalhos CORS adequados no servidor que hospeda os arquivos PDF são essenciais para uma integração perfeita entre as duas plataformas.

Além disso, você pode aprimorar o sistema pré-carregando arquivos PDF acessados ​​com frequência para reduzir o tempo de carregamento. As estratégias de pré-carregamento são úteis quando o usuário provavelmente alternará entre vários meses ou anos. Ao armazenar esses arquivos no cache do navegador, o carregamento subsequente de documentos será mais rápido, proporcionando uma experiência de usuário mais tranquila. Isso pode ser feito usando service workers ou outros mecanismos de cache, que podem ser configurados para pré-carregar PDFs conforme o usuário navega pelas opções disponíveis.