जावास्क्रिप्ट मैसेजिंग का उपयोग करके विक्स में ड्रॉपडाउन-संचालित पीडीएफ यूआरएल स्विचिंग को एकीकृत करना

विक्स लाइब्रेरी साइट पर पीडीएफ व्यूअर कार्यक्षमता को बढ़ाना

सार्वजनिक पुस्तकालय की वेबसाइट पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए पीडीएफ फाइलों के विशाल संग्रह को व्यवस्थित और उपयोगकर्ता के अनुकूल तरीके से प्रदर्शित करना महत्वपूर्ण है। लक्ष्य आगंतुकों को पुराने समाचार पत्रों जैसे ऐतिहासिक अभिलेखों तक निर्बाध पहुंच प्रदान करना है, जिन्हें पीडीएफ के रूप में संग्रहीत किया जाता है। इस परियोजना में, विक्स, वेलो और एक HTML एम्बेड तत्व का उपयोग एक मजबूत प्रणाली की नींव बनाता है।

Wix का प्लेटफ़ॉर्म आईफ़्रेम के माध्यम से एम्बेडेड तत्वों का समर्थन करता है, जिससे उपयोगकर्ता पीडीएफ व्यूअर जैसे इंटरैक्टिव घटकों को जोड़ सकते हैं। यह पीडीएफ व्यूअर एक आईफ्रेम का उपयोग करके एम्बेड किया गया है, और वर्तमान में, एक स्थिर यूआरएल परिभाषित करता है कि कौन सा दस्तावेज़ प्रदर्शित किया जाएगा। हालाँकि, उपयोगकर्ता इनपुट के आधार पर पीडीएफ फ़ाइल को गतिशील रूप से बदलने की आवश्यकता एक सहज अनुभव के लिए आवश्यक है।

चुनौती यह है कि उपयोगकर्ताओं को दो ड्रॉपडाउन में से एक वर्ष और एक महीने का चयन करने की अनुमति दी जाए, जो फिर प्रदर्शित पीडीएफ दस्तावेज़ में बदलाव को ट्रिगर करेगा। इसमें आईफ्रेम के साथ संचार करने के लिए जावास्क्रिप्ट मैसेजिंग को एकीकृत करना, ड्रॉपडाउन चयनों के अनुसार दस्तावेज़ के यूआरएल को बदलने में सक्षम बनाना शामिल है।

यह दृष्टिकोण न केवल कई स्थिर Wix पृष्ठों की आवश्यकता को कम करता है बल्कि लाइब्रेरी के पीडीएफ संग्रह तक पहुंच को भी सरल बनाता है। नीचे, हम वेलो फ्रेमवर्क और जावास्क्रिप्ट का उपयोग करके इसे लागू करने के लिए आवश्यक चरणों और समाधानों का पता लगाते हैं।

Wix में ड्रॉपडाउन चयनों के साथ डायनामिक पीडीएफ लोड हो रहा है

इस समाधान में, हम एम्बेडेड आईफ़्रेम के भीतर प्रदर्शित पीडीएफ फ़ाइल के यूआरएल को गतिशील रूप से संशोधित करने के लिए विक्स पेज पर ड्रॉपडाउन तत्वों की एक जोड़ी का उपयोग करते हैं। यह प्रणाली उन सार्वजनिक पुस्तकालयों के लिए विशेष रूप से उपयोगी है जो संग्रहीत समाचार पत्र पीडीएफ तक आसान पहुंच प्रदान करना चाहते हैं। मुख्य कार्यक्षमता द्वारा संचालित है जावास्क्रिप्ट संदेश, जो उपयोगकर्ता चयनों को ड्रॉपडाउन से एम्बेडेड पीडीएफ व्यूअर तक भेजता है। PSPDFKit व्यूअर का उपयोग iFrame के अंदर PDF को प्रस्तुत करने के लिए किया जाता है, और हम उपयोगकर्ता की पसंद के वर्ष और महीने के आधार पर URL को बदलकर व्यूअर में हेरफेर करते हैं। यह कई स्थिर Wix पेज बनाए बिना बड़े अभिलेखों को सामने लाने का एक सुव्यवस्थित तरीका प्रदान करता है।

पहला ड्रॉपडाउन वर्ष का चयन करता है, और दूसरा ड्रॉपडाउन महीने का चयन करता है। जब उपयोगकर्ता दोनों का चयन करता है, तो सिस्टम संबंधित पीडीएफ फ़ाइल के लिए उपयुक्त यूआरएल बनाता है। PSPDFKit.load() विधि इसमें केंद्रीय है, क्योंकि यह अद्यतन यूआरएल के आधार पर नए पीडीएफ को आईफ्रेम में लोड करता है। यह विधि PSPDFKit लाइब्रेरी का हिस्सा है, जो एक बाहरी स्क्रिप्ट के माध्यम से पेज पर एम्बेडेड है। पोस्टमैसेज() वैकल्पिक समाधान में एपीआई भी महत्वपूर्ण है, जो मूल पृष्ठ और आईफ्रेम के बीच संदेश भेजने की अनुमति देता है। आईफ्रेम पर नए पीडीएफ यूआरएल वाला एक संदेश भेजकर, पीडीएफ व्यूअर को गतिशील रूप से अपडेट किया जाता है।

यह सुनिश्चित करने के लिए कि स्क्रिप्ट केवल तभी चलती है जब DOM पूरी तरह से लोड हो जाता है, हम इसका उपयोग करते हैं DOMContentLoaded आयोजन। यह सुनिश्चित करता है कि ड्रॉपडाउन तत्व और PSPDFKit कंटेनर स्क्रिप्ट तक पहुंच योग्य हैं। हम प्रत्येक ड्रॉपडाउन में ईवेंट श्रोताओं को भी जोड़ते हैं। जब उपयोगकर्ता एक वर्ष या महीने का चयन करता है, तो संबंधित ईवेंट श्रोता चयन को कैप्चर करता है और पीडीएफ व्यूअर को सही यूआरएल के साथ पुनः लोड करने के लिए एक फ़ंक्शन को कॉल करता है। इसे एक सरल फ़ंक्शन के माध्यम से नियंत्रित किया जाता है जो ड्रॉपडाउन में चयनित मानों से यूआरएल बनाने के लिए टेम्पलेट शाब्दिक का उपयोग करता है। यह विधि न केवल लागू करना आसान है, बल्कि अत्यधिक मॉड्यूलर भी है, जिससे नए संग्रह जोड़े जाने पर आसानी से अपडेट किया जा सकता है।

दूसरे दृष्टिकोण में, हम उपयोग करते हैं पोस्टमैसेज() मूल पृष्ठ और iFrame के बीच संचार करने के लिए। मूल पृष्ठ ड्रॉपडाउन परिवर्तनों को सुनता है और नए पीडीएफ यूआरएल वाला एक संदेश iFrame को भेजता है, जो एक इवेंट श्रोता का उपयोग करके संदेश प्राप्त करता है। यह विधि अधिक पृथक वातावरणों से निपटने के लिए उपयोगी है जहां आईफ्रेम सीधे मूल पृष्ठ के DOM के साथ इंटरैक्ट नहीं कर सकता है। दोनों विधियां एम्बेडेड पीडीएफ व्यूअर की सामग्री को गतिशील रूप से अपडेट करने, कई स्थिर पृष्ठों की आवश्यकता को कम करने और उपयोगकर्ता के अनुकूल ब्राउज़िंग अनुभव प्रदान करने के कुशल तरीके प्रदान करती हैं।

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

विक्स और जावास्क्रिप्ट मैसेजिंग के साथ पीडीएफ आर्काइव एक्सेसिबिलिटी को बढ़ाना

Wix में एम्बेडेड पीडीएफ यूआरएल को गतिशील रूप से संशोधित करने के लिए ड्रॉपडाउन तत्वों का उपयोग करते समय एक और महत्वपूर्ण विचार यह सुनिश्चित करना है कि इनके बीच बातचीत हो आईफ़्रेम और मुख्य पृष्ठ कुशल है. जबकि जावास्क्रिप्ट मैसेजिंग हमें इन दो घटकों के बीच डेटा भेजने की अनुमति देती है, चयन कैसे अपडेट को ट्रिगर करता है, इसे अनुकूलित करके प्रदर्शन और उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है। यह इनपुट को डिबाउंस करके किया जा सकता है, जिसका अर्थ है कि सिस्टम प्रत्येक परिवर्तन के बजाय उपयोगकर्ता द्वारा अपना चयन पूरा करने के बाद ही पीडीएफ व्यूअर को अपडेट करता है।

एक और पहलू जो अभी तक कवर नहीं किया गया है क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (सीओआरएस). चूंकि पीडीएफ एक बाहरी सर्वर (जैसे डिजिटल ओशन) पर होस्ट किए जाते हैं, इसलिए यह सुनिश्चित करना महत्वपूर्ण है कि सर्वर को Wix डोमेन से एक्सेस की अनुमति देने के लिए कॉन्फ़िगर किया गया है। यदि सर्वर की सीओआरएस सेटिंग्स सही ढंग से कॉन्फ़िगर नहीं की गई हैं, तो पीडीएफ व्यूअर दस्तावेज़ को लोड करने में सक्षम नहीं हो सकता है, जिसके परिणामस्वरूप त्रुटियां होंगी। पीडीएफ फाइलों को होस्ट करने वाले सर्वर पर उचित सीओआरएस हेडर दो प्लेटफार्मों के बीच निर्बाध एकीकरण के लिए आवश्यक हैं।

इसके अतिरिक्त, आप लोडिंग समय को कम करने के लिए बार-बार एक्सेस की जाने वाली पीडीएफ फाइलों को प्रीलोड करके सिस्टम को बेहतर बना सकते हैं। प्रीलोडिंग रणनीतियाँ तब उपयोगी होती हैं जब उपयोगकर्ता को कई महीनों या वर्षों के बीच स्विच करने की संभावना होती है। इन फ़ाइलों को ब्राउज़र के कैश में संग्रहीत करने से, बाद में दस्तावेज़ लोड तेज़ हो जाएगा, जिससे एक सहज उपयोगकर्ता अनुभव मिलेगा। यह सेवा कर्मियों या अन्य कैशिंग तंत्रों का उपयोग करके किया जा सकता है, जिसे उपयोगकर्ता द्वारा उपलब्ध विकल्पों के माध्यम से नेविगेट करने पर पीडीएफ को प्रीलोड करने के लिए सेट किया जा सकता है।