Tích hợp chuyển đổi URL PDF theo hướng thả xuống trong Wix bằng cách sử dụng tin nhắn JavaScript

Nâng cao chức năng xem PDF trên trang thư viện Wix

Hiển thị kho lưu trữ khổng lồ các tệp PDF theo cách có tổ chức và thân thiện với người dùng là rất quan trọng để cải thiện trải nghiệm người dùng trên trang web của thư viện công cộng. Mục tiêu là cung cấp cho khách truy cập quyền truy cập liền mạch vào các hồ sơ lịch sử như báo cũ, được lưu trữ dưới dạng PDF. Trong dự án này, việc sử dụng Wix, Velo và phần tử nhúng HTML sẽ tạo nền tảng cho một hệ thống mạnh mẽ.

Nền tảng của Wix hỗ trợ các phần tử được nhúng thông qua iframe, cho phép người dùng thêm các thành phần tương tác như trình xem PDF. Trình xem PDF này được nhúng bằng iframe và hiện tại, URL tĩnh xác định tài liệu nào được hiển thị. Tuy nhiên, nhu cầu thay đổi linh hoạt tệp PDF dựa trên thông tin đầu vào của người dùng là điều cần thiết để có trải nghiệm mượt mà.

Thách thức là cho phép người dùng chọn một năm và một tháng từ hai danh sách thả xuống, sau đó sẽ kích hoạt thay đổi trong tài liệu PDF được hiển thị. Điều này liên quan đến việc tích hợp thông báo JavaScript để giao tiếp với iframe, cho phép URL của tài liệu thay đổi theo các lựa chọn thả xuống.

Cách tiếp cận này không chỉ làm giảm nhu cầu về nhiều trang Wix tĩnh mà còn đơn giản hóa việc truy cập vào kho lưu trữ PDF của thư viện. Dưới đây, chúng tôi khám phá các bước và giải pháp cần thiết để triển khai điều này bằng cách sử dụng khung Velo và JavaScript.

Tải PDF động với các lựa chọn thả xuống trong Wix

Trong giải pháp này, chúng tôi sử dụng một cặp phần tử thả xuống trên trang Wix để sửa đổi động URL của tệp PDF được hiển thị trong iFrame được nhúng. Hệ thống này đặc biệt hữu ích cho các thư viện công cộng muốn cung cấp quyền truy cập dễ dàng vào các tệp PDF báo được lưu trữ. Chức năng cốt lõi được cung cấp bởi Tin nhắn JavaScript, gửi các lựa chọn của người dùng từ danh sách thả xuống tới trình xem PDF được nhúng. Trình xem PSPDFKit được sử dụng để hiển thị các tệp PDF bên trong iFrame và chúng tôi thao tác với trình xem bằng cách thay đổi URL dựa trên lựa chọn năm và tháng của người dùng. Điều này cung cấp một cách hợp lý để hiển thị các kho lưu trữ lớn mà không cần tạo nhiều trang Wix tĩnh.

Danh sách thả xuống đầu tiên chọn năm và danh sách thả xuống thứ hai chọn tháng. Khi người dùng chọn cả hai, hệ thống sẽ tạo URL thích hợp cho tệp PDF tương ứng. các PSPPDFKit.load() Phương pháp này là trọng tâm của việc này vì nó tải tệp PDF mới vào iFrame dựa trên URL được cập nhật. Phương pháp này là một phần của thư viện PSPDFKit, được nhúng trên trang thông qua tập lệnh bên ngoài. các postMessage() API cũng rất quan trọng trong giải pháp thay thế, cho phép nhắn tin giữa trang gốc và iframe. Bằng cách gửi tin nhắn chứa URL PDF mới tới iframe, trình xem PDF sẽ được cập nhật động.

Để đảm bảo rằng tập lệnh chỉ chạy khi DOM được tải đầy đủ, chúng tôi sử dụng Nội dung DOM được tải sự kiện. Điều này đảm bảo rằng tập lệnh có thể truy cập được các phần tử thả xuống và vùng chứa PSPDFKit. Chúng tôi cũng thêm trình xử lý sự kiện vào mỗi danh sách thả xuống. Khi người dùng chọn một năm hoặc tháng, trình xử lý sự kiện tương ứng sẽ ghi lại lựa chọn đó và gọi một hàm để tải lại trình xem PDF bằng URL chính xác. Điều này được xử lý thông qua một hàm đơn giản sử dụng các ký tự mẫu để tạo URL từ các giá trị đã chọn trong danh sách thả xuống. Phương pháp này không chỉ dễ thực hiện mà còn có tính mô-đun hóa cao, cho phép cập nhật dễ dàng khi các kho lưu trữ mới được thêm vào.

Trong cách tiếp cận thứ hai, chúng tôi sử dụng postMessage() để liên lạc giữa trang mẹ và iFrame. Trang mẹ lắng nghe các thay đổi thả xuống và gửi thông báo chứa URL PDF mới tới iFrame, nhận thông báo bằng trình xử lý sự kiện. Phương pháp này hữu ích khi xử lý các môi trường biệt lập hơn trong đó iframe không thể tương tác trực tiếp với DOM của trang mẹ. Cả hai phương pháp đều cung cấp những cách hiệu quả để cập nhật nội dung của trình xem PDF được nhúng một cách linh hoạt, giảm nhu cầu về nhiều trang tĩnh và mang lại trải nghiệm duyệt web thân thiện với người dùng.

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

Tăng cường khả năng truy cập kho lưu trữ PDF bằng tin nhắn Wix và JavaScript

Một cân nhắc quan trọng khác khi sử dụng các phần tử thả xuống để sửa đổi động URL PDF được nhúng trong Wix là đảm bảo rằng sự tương tác giữa iFrame và trang chính hoạt động hiệu quả. Mặc dù tính năng nhắn tin JavaScript cho phép chúng tôi gửi dữ liệu giữa hai thành phần này nhưng hiệu suất và trải nghiệm người dùng có thể được cải thiện bằng cách tối ưu hóa cách lựa chọn kích hoạt cập nhật. Điều này có thể được thực hiện bằng cách gỡ bỏ dữ liệu đầu vào, nghĩa là hệ thống chỉ cập nhật trình xem PDF sau khi người dùng hoàn thành lựa chọn của họ chứ không phải sau mỗi thay đổi.

Một khía cạnh khác chưa được đề cập đến là chia sẻ tài nguyên nhiều nguồn gốc (CORS). Vì các tệp PDF được lưu trữ trên máy chủ bên ngoài (chẳng hạn như Digital Ocean), nên điều quan trọng là phải đảm bảo rằng máy chủ được định cấu hình để cho phép truy cập từ miền Wix. Nếu cài đặt CORS của máy chủ không được định cấu hình chính xác, trình xem PDF có thể không tải được tài liệu, dẫn đến lỗi. Các tiêu đề CORS thích hợp trên máy chủ lưu trữ tệp PDF là điều cần thiết để tích hợp liền mạch giữa hai nền tảng.

Ngoài ra, bạn có thể nâng cao hệ thống bằng cách tải trước các tệp PDF được truy cập thường xuyên để giảm thời gian tải. Chiến lược tải trước rất hữu ích khi người dùng có khả năng chuyển đổi giữa nhiều tháng hoặc nhiều năm. Bằng cách lưu trữ các tệp này vào bộ đệm của trình duyệt, các lần tải tài liệu tiếp theo sẽ nhanh hơn, mang lại trải nghiệm mượt mà hơn cho người dùng. Điều này có thể được thực hiện bằng cách sử dụng nhân viên dịch vụ hoặc các cơ chế bộ đệm khác, có thể được thiết lập để tải trước các tệp PDF khi người dùng điều hướng qua các tùy chọn có sẵn.