जावास्क्रिप्ट मेसेजिंगचा वापर करून विक्समध्ये ड्रॉपडाउन-चालित पीडीएफ URL समाकलित करणे

Wix लायब्ररी साइटवर PDF दर्शक कार्यक्षमता वाढवणे

सार्वजनिक लायब्ररीच्या वेबसाइटवर वापरकर्ता अनुभव सुधारण्यासाठी पीडीएफ फायलींचे विस्तृत संग्रहण आयोजित आणि वापरकर्ता-अनुकूल पद्धतीने प्रदर्शित करणे महत्वाचे आहे. अभ्यागतांना पीडीएफ म्हणून संग्रहित केलेल्या जुन्या वर्तमानपत्रांसारख्या ऐतिहासिक नोंदींवर अखंड प्रवेश देणे हे ध्येय आहे. या प्रकल्पात, Wix, Velo आणि HTML एम्बेड घटकाचा वापर मजबूत प्रणालीचा पाया तयार करतो.

Wix चे प्लॅटफॉर्म iframes द्वारे एम्बेड केलेल्या घटकांना समर्थन देते, वापरकर्त्यांना PDF दर्शकांसारखे परस्परसंवादी घटक जोडण्याची परवानगी देते. हा PDF दर्शक iframe वापरून एम्बेड केलेला आहे आणि सध्या, एक स्थिर URL कोणता दस्तऐवज प्रदर्शित केला जातो हे परिभाषित करते. तथापि, सुरळीत अनुभवासाठी वापरकर्ता इनपुटवर आधारित PDF फाइल डायनॅमिकली बदलण्याची गरज आहे.

वापरकर्त्यांना दोन ड्रॉपडाउनमधून एक वर्ष आणि एक महिना निवडण्याची परवानगी देणे हे आव्हान आहे, जे नंतर प्रदर्शित केलेल्या PDF दस्तऐवजात बदल घडवून आणेल. यामध्ये iframe शी संवाद साधण्यासाठी JavaScript मेसेजिंग समाकलित करणे, ड्रॉपडाउन निवडीनुसार बदलण्यासाठी डॉक्युमेंटची URL सक्षम करणे समाविष्ट आहे.

हा दृष्टिकोन केवळ असंख्य स्थिर Wix पृष्ठांची आवश्यकता कमी करत नाही तर लायब्ररीच्या PDF संग्रहणात प्रवेश देखील सुलभ करतो. खाली, आम्ही Velo फ्रेमवर्क आणि JavaScript वापरून याची अंमलबजावणी करण्यासाठी आवश्यक असलेल्या पायऱ्या आणि उपाय एक्सप्लोर करतो.

Wix मध्ये ड्रॉपडाउन निवडीसह डायनॅमिक पीडीएफ लोडिंग

या सोल्यूशनमध्ये, एम्बेडेड iFrame मध्ये प्रदर्शित केलेल्या PDF फाइलची URL डायनॅमिकरित्या सुधारण्यासाठी आम्ही Wix पृष्ठावरील ड्रॉपडाउन घटकांची जोडी वापरतो. संग्रहित वृत्तपत्र PDF मध्ये सहज प्रवेश प्रदान करू पाहणाऱ्या सार्वजनिक ग्रंथालयांसाठी ही प्रणाली विशेषतः उपयुक्त आहे. कोर कार्यक्षमता द्वारे समर्थित आहे JavaScript संदेशन, जे ड्रॉपडाउनमधून वापरकर्त्याच्या निवडी एम्बेड केलेल्या PDF दर्शकाकडे पाठवते. PSPDFKit व्ह्यूअरचा वापर iFrame मध्ये PDF रेंडर करण्यासाठी केला जातो आणि आम्ही वापरकर्त्याच्या वर्ष आणि महिन्याच्या निवडीच्या आधारावर URL बदलून दर्शकांना हाताळतो. हे एकाधिक स्थिर Wix पृष्ठे तयार न करता मोठ्या संग्रहणांना पृष्ठभाग देण्यासाठी एक सुव्यवस्थित मार्ग प्रदान करते.

पहिला ड्रॉपडाउन वर्ष निवडतो आणि दुसरा ड्रॉपडाउन महिना निवडतो. जेव्हा वापरकर्ता दोन्ही निवडतो, तेव्हा सिस्टम संबंधित PDF फाइलसाठी योग्य URL तयार करते. द PSPDFKit.load() पद्धत यासाठी मध्यवर्ती आहे, कारण ती अद्यतनित URL वर आधारित iFrame मध्ये नवीन PDF लोड करते. ही पद्धत PSPDFKit लायब्ररीचा भाग आहे, जी पृष्ठावर बाह्य स्क्रिप्टद्वारे एम्बेड केलेली आहे. द पोस्ट मेसेज() पर्यायी सोल्युशनमध्ये API देखील महत्त्वपूर्ण आहे, जे मूळ पृष्ठ आणि iframe दरम्यान संदेश पाठविण्यास अनुमती देते. iframe वर नवीन PDF URL असलेला संदेश पाठवून, PDF दर्शक गतिमानपणे अद्यतनित केला जातो.

जेव्हा DOM पूर्णपणे लोड केले जाते तेव्हाच स्क्रिप्ट चालते याची खात्री करण्यासाठी, आम्ही वापरतो DOMContentLoaded कार्यक्रम हे सुनिश्चित करते की ड्रॉपडाउन घटक आणि PSPDFKit कंटेनर स्क्रिप्टमध्ये प्रवेश करण्यायोग्य आहेत. आम्ही प्रत्येक ड्रॉपडाउनमध्ये इव्हेंट श्रोते देखील जोडतो. जेव्हा वापरकर्ता एक वर्ष किंवा महिना निवडतो, तेव्हा संबंधित इव्हेंट श्रोता निवड कॅप्चर करतो आणि योग्य URL सह PDF दर्शक रीलोड करण्यासाठी फंक्शन कॉल करतो. हे एका साध्या फंक्शनद्वारे हाताळले जाते जे ड्रॉपडाउनमधील निवडलेल्या मूल्यांमधून URL तयार करण्यासाठी टेम्पलेट लिटरल वापरते. ही पद्धत केवळ अंमलात आणण्यास सोपी नाही तर उच्च मॉड्यूलर देखील आहे, ज्यामुळे नवीन संग्रहण जोडले गेल्याने सोपे अद्यतने मिळू शकतात.

दुसऱ्या पध्दतीमध्ये, आम्ही वापरतो पोस्ट मेसेज() मूळ पृष्ठ आणि iFrame दरम्यान संवाद साधण्यासाठी. मूळ पृष्ठ ड्रॉपडाउन बदलांसाठी ऐकते आणि iFrame ला नवीन PDF URL असलेला संदेश पाठवते, जो इव्हेंट श्रोता वापरून संदेश प्राप्त करतो. आयफ्रेम थेट मूळ पृष्ठाच्या 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>

१

Wix आणि JavaScript मेसेजिंगसह PDF संग्रहण सुलभता वाढवणे

Wix मध्ये एम्बेडेड पीडीएफ URL डायनॅमिकरित्या सुधारित करण्यासाठी ड्रॉपडाउन घटक वापरताना आणखी एक महत्त्वाचा विचार म्हणजे त्यांच्यामधील परस्परसंवाद सुनिश्चित करणे. iFrame आणि मुख्य पृष्ठ कार्यक्षम आहे. JavaScript मेसेजिंग आम्हाला या दोन घटकांमध्ये डेटा पाठविण्याची अनुमती देत ​​असताना, निवड अद्यतने कशी ट्रिगर करते हे ऑप्टिमाइझ करून कार्यप्रदर्शन आणि वापरकर्ता अनुभव सुधारला जाऊ शकतो. हे इनपुट डिबाउन करून केले जाऊ शकते, याचा अर्थ प्रत्येक बदलाऐवजी वापरकर्त्याने त्यांची निवड पूर्ण केल्यानंतर सिस्टम पीडीएफ व्ह्यूअरला अपडेट करते.

अजून एक पैलू जो अजून कव्हर केलेला नाही क्रॉस-ओरिजिन रिसोर्स शेअरिंग (CORS). PDFs बाह्य सर्व्हरवर (जसे की डिजिटल महासागर) होस्ट केलेले असल्याने, Wix डोमेनमधून प्रवेशास अनुमती देण्यासाठी सर्व्हर कॉन्फिगर केले आहे याची खात्री करणे महत्त्वाचे आहे. सर्व्हरची CORS सेटिंग्ज योग्यरित्या कॉन्फिगर केलेली नसल्यास, PDF दर्शक दस्तऐवज लोड करू शकणार नाही, परिणामी त्रुटी येऊ शकतात. पीडीएफ फाइल्स होस्ट करणाऱ्या सर्व्हरवर योग्य CORS शीर्षलेख दोन प्लॅटफॉर्ममधील अखंड एकत्रीकरणासाठी आवश्यक आहेत.

याव्यतिरिक्त, लोडिंग वेळा कमी करण्यासाठी तुम्ही वारंवार ऍक्सेस केलेल्या PDF फाइल्स प्रीलोड करून सिस्टम वाढवू शकता. प्रीलोडिंग धोरणे उपयोगी ठरतात जेव्हा वापरकर्ता अनेक महिने किंवा वर्षांमध्ये स्विच करण्याची शक्यता असते. या फायली ब्राउझरच्या कॅशेमध्ये संचयित केल्याने, त्यानंतरचे दस्तऐवज लोड जलद होतील, वापरकर्ता अनुभव अधिक सुलभ होईल. हे सेवा कामगार किंवा इतर कॅशिंग यंत्रणा वापरून केले जाऊ शकते, जे वापरकर्ता उपलब्ध पर्यायांमधून नेव्हिगेट करत असताना PDF प्रीलोड करण्यासाठी सेट केले जाऊ शकते.