使用 JavaScript 消息传递在 Wix 中集成下拉驱动的 PDF URL 切换

在 Wix 中实现 PDF 查看器基于下拉的 URL 切换

使用 JavaScript 和 Velo 框架的前端脚本

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

替代方法：使用 PostMessage API 进行 iFrame 通信

使用 postMessage API 的前端脚本可以更好地隔离 iframe 和父文档

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

有关 Wix 中动态 PDF 嵌入的常见问题

1. 如何在 Wix 中添加下拉选择器？
2. 您可以使用 Wix 编辑器添加下拉元素，并使用 JavaScript 通过分配唯一 ID 来控制它们。下拉元素将通过以下方式触发 PDF URL 的更改 document.getElementById()。
3. 什么是 PSPDFKit.load() 命令做什么？
4. 这 PSPDFKit.load() 方法负责渲染 PDF 查看器并将特定的 PDF 文件加载到其中。此方法是 PSPDFKit 库的一部分，用于动态显示 PDF 文件。
5. 我可以使用吗 postMessage() 用于跨源通信？
6. 是的， postMessage() API 是专门为不同来源之间的通信而设计的，例如父页面和 iFrame 之间的通信，这对于此实现至关重要。
7. 加载 PDF 时出现错误如何处理？
8. 您可以通过添加一个来处理错误 .catch() 块到 PSPDFKit.load() 函数捕获加载过程中发生的任何错误并显示适当的错误消息。
9. 我需要为 CORS 配置服务器吗？
10. 是的，如果您的 PDF 托管在不同的域上，您需要确保服务器设置正确 CORS 标头以允许 Wix 站点访问文档。

关于动态 PDF 显示的最终想法

该解决方案简化了在单个页面上显示大型 PDF 文件档案的过程。通过使用两个下拉元素来选择年份和月份，我们可以动态更新 PDF 查看器，而无需创建多个 Wix 页面。

此方法将 Velo 框架的灵活性与下拉列表和 iFrame 之间的 JavaScript 消息传递相结合，提供了一种组织和呈现历史数据的有效方法。对于图书馆档案馆等面向公众的网站来说，它既可扩展又易于使用。