JavaScript メッセージングを使用したドロップダウン駆動の PDF URL スイッチングを Wix に統合する

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 ファイルの大きなアーカイブを 1 ページに表示するプロセスが簡素化されます。年と月を選択する 2 つのドロップダウン要素を使用することで、複数の Wix ページを作成せずに PDF ビューアを動的に更新できます。

Velo フレームワークの柔軟性とドロップダウンと iFrame 間の JavaScript メッセージングを組み合わせたこの方法は、履歴データを整理して表示する効率的な方法を提供します。図書館アーカイブなどの一般向け Web サイトにとって、スケーラブルで使いやすいものです。