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>

대체 접근 방식: iFrame 통신에 PostMessage API 사용

iframe과 상위 문서 간의 더 나은 격리를 위해 postMessage API를 사용하는 프런트엔드 스크립트

// 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 파일을 로드하는 역할을 담당합니다. 이 방법은 PDF 파일을 동적으로 표시하는 데 사용되는 PSPDFKit 라이브러리의 일부입니다.
5. 사용할 수 있나요? postMessage() 교차 출처 통신을 위해?
6. 예, postMessage() API는 상위 페이지와 iFrame 간 등 서로 다른 출처 간 통신을 위해 특별히 설계되었으며 이는 이 구현에 매우 중요합니다.
7. PDF를 로드할 때 오류를 어떻게 처리합니까?
8. 다음을 추가하여 오류를 처리할 수 있습니다. .catch() ~을 차단하다 PSPDFKit.load() 로딩 과정에서 발생하는 오류를 포착하고 적절한 오류 메시지를 표시하는 기능입니다.
9. CORS용 서버를 구성해야 합니까?
10. 예, 귀하의 PDF가 다른 도메인에서 호스팅되는 경우 서버가 적절한 도메인으로 설정되어 있는지 확인해야 합니다. CORS Wix 사이트가 문서에 접근할 수 있도록 허용하는 헤더입니다.

동적 PDF 디스플레이에 대한 최종 생각

이 솔루션은 단일 페이지에 대규모 PDF 파일 아카이브를 표시하는 프로세스를 단순화합니다. 연도와 월을 선택하는 두 개의 드롭다운 요소를 사용하면 Wix 페이지를 여러 개 만들지 않고도 PDF 뷰어를 동적으로 업데이트할 수 있습니다.

Velo 프레임워크의 유연성과 드롭다운 및 iFrame 간의 JavaScript 메시징을 결합한 이 방법은 기록 데이터를 구성하고 표시하는 효율적인 방법을 제공합니다. 도서관 아카이브와 같은 공개 웹사이트에 맞게 확장 가능하고 사용자 친화적입니다.