Mengintegrasikan Penukaran URL PDF Didorong Turun dalam Wix Menggunakan Pemesejan JavaScript

Meningkatkan Fungsi Pemapar PDF pada Tapak Perpustakaan Wix

Memaparkan arkib besar fail PDF dalam cara yang teratur dan mesra pengguna adalah penting untuk meningkatkan pengalaman pengguna di tapak web perpustakaan awam. Matlamatnya adalah untuk menawarkan pengunjung akses lancar kepada rekod sejarah seperti surat khabar lama, yang disimpan sebagai PDF. Dalam projek ini, penggunaan Wix, Velo dan elemen benam HTML mewujudkan asas untuk sistem yang teguh.

Platform Wix menyokong elemen terbenam melalui iframe, membolehkan pengguna menambah komponen interaktif seperti penonton PDF. Pemapar PDF ini dibenamkan menggunakan iframe, dan pada masa ini, URL statik mentakrifkan dokumen yang dipaparkan. Walau bagaimanapun, keperluan untuk menukar fail PDF secara dinamik berdasarkan input pengguna adalah penting untuk pengalaman yang lancar.

Cabarannya adalah untuk membenarkan pengguna memilih satu tahun dan sebulan daripada dua lungsur turun, yang kemudiannya akan mencetuskan perubahan dalam dokumen PDF yang dipaparkan. Ini melibatkan penyepaduan pemesejan JavaScript untuk berkomunikasi dengan iframe, membolehkan URL dokumen berubah mengikut pilihan lungsur turun.

Pendekatan ini bukan sahaja mengurangkan keperluan untuk banyak halaman Wix statik tetapi juga memudahkan akses kepada arkib PDF perpustakaan. Di bawah, kami meneroka langkah dan penyelesaian yang diperlukan untuk melaksanakan ini menggunakan rangka kerja Velo dan JavaScript.

Perintah	Contoh Penggunaan
PSPDFKit.load()	Kaedah ini memulakan pemapar PDF PSPDFKit di dalam bekas tertentu. Ia memuatkan fail PDF daripada URL yang disediakan, menjadikannya boleh dilihat dalam elemen benam. Ia khusus untuk perpustakaan JavaScript PSPDFKit, yang disesuaikan untuk membenamkan dan melihat dokumen PDF.
postMessage()	Digunakan untuk berkomunikasi antara tetingkap induk dan iframe terbenam. Dalam konteks ini, ia menghantar mesej dari halaman utama ke iframe, membenarkan iframe mengemas kini kandungannya (URL PDF) berdasarkan pilihan lungsur turun.
window.addEventListener("message")	Pendengar acara ini ditambahkan di dalam iframe untuk mendengar mesej yang dihantar melalui postMessage(). Ia memproses mesej untuk memuatkan dokumen PDF baharu secara dinamik dalam iframe berdasarkan data yang diterima.
event.data	Dalam pengendali acara mesej, event.data mengandungi data yang dihantar daripada tetingkap induk. Dalam kes ini, ia termasuk URL fail PDF yang dipilih untuk dimuatkan ke dalam pemapar PSPDFKit.
document.getElementById()	Kaedah manipulasi DOM ini mendapatkan semula elemen HTML dengan IDnya. Ia digunakan untuk menangkap input pengguna daripada elemen lungsur turun, membolehkan skrip menentukan tahun dan bulan yang dipilih untuk kemas kini URL PDF.
DOMContentLoaded	Peristiwa yang memastikan JavaScript dilaksanakan hanya selepas DOM telah dimuatkan sepenuhnya. Ini menghalang ralat semasa cuba mengakses elemen DOM sebelum ia wujud.
addEventListener("change")	Pendengar acara ini memantau elemen lungsur turun untuk sebarang perubahan. Apabila pengguna memilih tahun atau bulan yang berbeza, fungsi tersebut dicetuskan untuk mengemas kini URL PDF dan memuatkan dokumen yang sepadan.
template literals	Literal templat (disampingi dengan tanda belakang) membenarkan membenamkan pembolehubah ke dalam rentetan, menjadikannya mudah untuk menjana URL secara dinamik untuk PDF yang dipilih. Contohnya: `https://domain.tld/${year}_${month}_etc.pdf`.
container: "#pspdfkit"	Dalam pemula PSPDFKit, bekas menentukan elemen HTML (mengikut ID) tempat pemapar PDF akan dipaparkan. Ini penting untuk menentukan tempat PDF akan dipaparkan pada halaman.

Pemuatan PDF Dinamik dengan Pilihan Jatuh Turun dalam Wix

Dalam penyelesaian ini, kami menggunakan sepasang elemen lungsur turun pada halaman Wix untuk mengubah suai URL fail PDF secara dinamik yang dipaparkan dalam iFrame terbenam. Sistem ini amat berguna untuk perpustakaan awam yang ingin menyediakan akses mudah kepada PDF akhbar yang diarkibkan. Fungsi teras dikuasakan oleh , yang menghantar pilihan pengguna daripada menu lungsur ke pemapar PDF terbenam. Pemapar PSPDFKit digunakan untuk memaparkan PDF di dalam iFrame, dan kami memanipulasi pemapar dengan mengubah URL berdasarkan pilihan tahun dan bulan pengguna. Ini menyediakan cara yang diperkemas untuk memaparkan arkib besar tanpa membuat berbilang halaman Wix statik.

Dropdown pertama memilih tahun, dan dropdown kedua memilih bulan. Apabila pengguna memilih kedua-duanya, sistem membina URL yang sesuai untuk fail PDF yang sepadan. The kaedah ini penting, kerana ia memuatkan PDF baharu ke dalam iFrame berdasarkan URL yang dikemas kini. Kaedah ini adalah sebahagian daripada pustaka PSPDFKit, yang dibenamkan pada halaman melalui skrip luaran. The API juga penting dalam penyelesaian alternatif, yang membolehkan pemesejan antara halaman induk dan iframe. Dengan menghantar mesej yang mengandungi URL PDF baharu ke iframe, pemapar PDF dikemas kini secara dinamik.

Untuk memastikan bahawa skrip berjalan hanya apabila DOM dimuatkan sepenuhnya, kami menggunakan peristiwa. Ini memastikan elemen lungsur turun dan bekas PSPDFKit boleh diakses oleh skrip. Kami juga menambah pendengar acara pada setiap lungsur turun. Apabila pengguna memilih tahun atau bulan, pendengar acara yang sepadan menangkap pemilihan dan memanggil fungsi untuk memuatkan semula pemapar PDF dengan URL yang betul. Ini dikendalikan melalui fungsi mudah yang menggunakan literal templat untuk membina URL daripada nilai yang dipilih dalam menu lungsur. Kaedah ini bukan sahaja mudah untuk dilaksanakan tetapi juga sangat modular, membolehkan kemas kini mudah apabila arkib baharu ditambah.

Dalam pendekatan kedua, kita gunakan untuk berkomunikasi antara halaman induk dan iFrame. Halaman induk mendengar perubahan lungsur turun dan menghantar mesej yang mengandungi URL PDF baharu ke iFrame, yang menerima mesej menggunakan pendengar acara. Kaedah ini berguna apabila berurusan dengan persekitaran yang lebih terpencil di mana iframe tidak boleh berinteraksi secara langsung dengan DOM halaman induk. Kedua-dua kaedah menyediakan cara yang cekap untuk mengemas kini kandungan pemapar PDF terbenam secara dinamik, mengurangkan keperluan untuk berbilang halaman statik dan menawarkan pengalaman penyemakan imbas yang mesra pengguna.

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

Meningkatkan Kebolehcapaian Arkib PDF dengan Pemesejan Wix dan JavaScript

Satu lagi pertimbangan penting apabila menggunakan elemen lungsur turun untuk mengubah suai URL PDF terbenam secara dinamik dalam Wix ialah memastikan interaksi antara dan halaman utama adalah cekap. Walaupun pemesejan JavaScript membolehkan kami menghantar data antara dua komponen ini, prestasi dan pengalaman pengguna boleh dipertingkatkan dengan mengoptimumkan cara pemilihan mencetuskan kemas kini. Ini boleh dilakukan dengan menyahlantunkan input, bermakna sistem hanya mengemas kini pemapar PDF selepas pengguna menyelesaikan pemilihan mereka, bukannya pada setiap perubahan.

Satu lagi aspek yang belum dibincangkan ialah . Memandangkan PDF dihoskan pada pelayan luaran (seperti Digital Ocean), adalah penting untuk memastikan pelayan dikonfigurasikan untuk membenarkan akses daripada domain Wix. Jika tetapan CORS pelayan tidak dikonfigurasikan dengan betul, pemapar PDF mungkin tidak dapat memuatkan dokumen, mengakibatkan ralat. Pengepala CORS yang betul pada pelayan yang mengehos fail PDF adalah penting untuk penyepaduan yang lancar antara kedua-dua platform.

Selain itu, anda boleh meningkatkan sistem dengan pramuat fail PDF yang kerap diakses untuk mengurangkan masa pemuatan. Strategi pramuat berguna apabila pengguna mungkin bertukar antara beberapa bulan atau tahun. Dengan menyimpan fail ini dalam cache penyemak imbas, pemuatan dokumen seterusnya akan menjadi lebih pantas, memberikan pengalaman pengguna yang lebih lancar. Ini boleh dilakukan menggunakan pekerja perkhidmatan atau mekanisme caching lain, yang boleh disediakan untuk pramuat PDF semasa pengguna menavigasi melalui pilihan yang tersedia.

1. Bagaimanakah saya menambah pemilih lungsur turun dalam Wix?
2. Anda boleh menambah elemen lungsur menggunakan editor Wix dan menggunakan JavaScript untuk mengawalnya dengan memberikan ID unik. Elemen lungsur turun akan mencetuskan perubahan dalam URL PDF melalui .
3. Apa yang perintah lakukan?
4. The kaedah bertanggungjawab untuk memaparkan pemapar PDF dan memuatkan fail PDF tertentu ke dalamnya. Kaedah ini adalah sebahagian daripada perpustakaan PSPDFKit yang digunakan untuk memaparkan fail PDF secara dinamik.
5. Boleh saya guna untuk komunikasi silang asal?
6. Ya, yang API direka khusus untuk berkomunikasi antara asal yang berbeza, seperti antara halaman induk dan iFrame, yang penting untuk pelaksanaan ini.
7. Bagaimanakah saya mengendalikan ralat semasa memuatkan PDF?
8. Anda boleh menangani ralat dengan menambahkan a blok ke berfungsi untuk menangkap sebarang ralat yang berlaku semasa proses pemuatan dan memaparkan mesej ralat yang sesuai.
9. Adakah saya perlu mengkonfigurasi pelayan saya untuk CORS?
10. Ya, jika PDF anda dihoskan pada domain yang berbeza, anda perlu memastikan pelayan disediakan dengan betul pengepala untuk membenarkan tapak Wix mengakses dokumen.

Penyelesaian ini memudahkan proses memaparkan arkib besar fail PDF pada satu halaman. Dengan menggunakan dua elemen lungsur turun untuk memilih tahun dan bulan, kami boleh mengemas kini pemapar PDF secara dinamik tanpa membuat berbilang halaman Wix.

Menggabungkan fleksibiliti rangka kerja Velo dengan pemesejan JavaScript antara dropdown dan iFrame, kaedah ini menyediakan cara yang cekap untuk mengatur dan mempersembahkan data sejarah. Ia boleh skala dan mesra pengguna untuk tapak web yang dihadapi orang ramai seperti arkib perpustakaan.