ஜாவாஸ்கிரிப்ட் மெசேஜிங்கைப் பயன்படுத்தி Wix இல் டிராப் டவுன்-டிரைவன் PDF URL மாற்றத்தை ஒருங்கிணைத்தல்

Wix லைப்ரரி தளத்தில் PDF வியூவர் செயல்பாட்டை மேம்படுத்துகிறது

ஒரு பொது நூலகத்தின் இணையதளத்தில் பயனர் அனுபவத்தை மேம்படுத்துவதற்கு PDF கோப்புகளின் பரந்த காப்பகத்தை ஒழுங்கமைக்கப்பட்ட மற்றும் பயனர் நட்பு முறையில் காண்பிப்பது மிகவும் முக்கியமானது. PDFகளாக சேமிக்கப்படும் பழைய செய்தித்தாள்கள் போன்ற வரலாற்றுப் பதிவுகளை பார்வையாளர்களுக்கு தடையின்றி அணுகுவதே குறிக்கோள். இந்த திட்டத்தில், Wix, Velo மற்றும் ஒரு HTML உட்பொதி உறுப்புகளின் பயன்பாடு ஒரு வலுவான அமைப்புக்கான அடித்தளத்தை உருவாக்குகிறது.

Wix இன் இயங்குதளமானது iframes மூலம் உட்பொதிக்கப்பட்ட கூறுகளை ஆதரிக்கிறது, PDF பார்வையாளர்கள் போன்ற ஊடாடும் கூறுகளைச் சேர்க்க பயனர்களை அனுமதிக்கிறது. இந்த PDF வியூவர் ஒரு iframe ஐப் பயன்படுத்தி உட்பொதிக்கப்பட்டுள்ளது, தற்போது, ​​எந்த ஆவணம் காட்டப்படும் என்பதை நிலையான URL வரையறுக்கிறது. இருப்பினும், பயனர் உள்ளீட்டின் அடிப்படையில் PDF கோப்பை மாறும் வகையில் மாற்ற வேண்டிய அவசியம் மென்மையான அனுபவத்திற்கு அவசியம்.

இரண்டு டிராப் டவுன்களில் இருந்து ஒரு வருடம் மற்றும் ஒரு மாதத்தைத் தேர்ந்தெடுக்க பயனர்களை அனுமதிப்பதே சவாலாகும், இது காட்டப்படும் PDF ஆவணத்தில் மாற்றத்தைத் தூண்டும். ஐஃப்ரேமுடன் தொடர்புகொள்வதற்காக ஜாவாஸ்கிரிப்ட் செய்தியிடலை ஒருங்கிணைத்து, கீழ்தோன்றும் தேர்வுகளின்படி ஆவணத்தின் URL ஐ மாற்றுவதை இது உள்ளடக்குகிறது.

இந்த அணுகுமுறை பல நிலையான Wix பக்கங்களின் தேவையை குறைப்பது மட்டுமல்லாமல், நூலகத்தின் PDF காப்பகத்திற்கான அணுகலையும் எளிதாக்குகிறது. கீழே, Velo கட்டமைப்பு மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இதைச் செயல்படுத்த தேவையான படிகள் மற்றும் தீர்வுகளை ஆராய்வோம்.

Wix இல் கீழ்தோன்றும் தேர்வுகளுடன் டைனமிக் PDF ஏற்றுதல்

இந்தத் தீர்வில், உட்பொதிக்கப்பட்ட iFrame இல் காட்டப்படும் PDF கோப்பின் URLஐ மாறும் வகையில் மாற்ற, Wix பக்கத்தில் ஒரு ஜோடி கீழ்தோன்றும் கூறுகளைப் பயன்படுத்துகிறோம். காப்பகப்படுத்தப்பட்ட செய்தித்தாள் PDFகளை எளிதாக அணுகும் பொது நூலகங்களுக்கு இந்த அமைப்பு மிகவும் பயனுள்ளதாக இருக்கும். முக்கிய செயல்பாடு மூலம் இயக்கப்படுகிறது ஜாவாஸ்கிரிப்ட் செய்தியிடல், இது பயனர் தேர்வுகளை கீழ்தோன்றல்களில் இருந்து உட்பொதிக்கப்பட்ட PDF பார்வையாளருக்கு அனுப்புகிறது. PSPDFKit வியூவர் iFrame க்குள் PDFகளை வழங்குவதற்குப் பயன்படுத்தப்படுகிறது, மேலும் பயனரின் ஆண்டு மற்றும் மாதத் தேர்வின் அடிப்படையில் URL ஐ மாற்றுவதன் மூலம் பார்வையாளரைக் கையாளுகிறோம். பல நிலையான Wix பக்கங்களை உருவாக்காமல் பெரிய காப்பகங்களை மேற்பரப்புவதற்கு இது ஒரு நெறிப்படுத்தப்பட்ட வழியை வழங்குகிறது.

முதல் கீழ்தோன்றும் ஆண்டைத் தேர்ந்தெடுக்கும், இரண்டாவது கீழ்தோன்றும் மாதத்தைத் தேர்ந்தெடுக்கும். பயனர் இரண்டையும் தேர்ந்தெடுக்கும்போது, ​​தொடர்புடைய PDF கோப்பிற்கான பொருத்தமான URL ஐ கணினி உருவாக்குகிறது. தி PSPDFKit.load() மேம்படுத்தப்பட்ட URL ஐ அடிப்படையாகக் கொண்டு iFrame இல் புதிய PDF ஐ ஏற்றுவதால், முறை இதற்கு மையமானது. இந்த முறை PSPDFKit நூலகத்தின் ஒரு பகுதியாகும், இது வெளிப்புற ஸ்கிரிப்ட் மூலம் பக்கத்தில் உட்பொதிக்கப்பட்டுள்ளது. தி postMessage() மாற்று தீர்விலும் API முக்கியமானது, இது பெற்றோர் பக்கத்திற்கும் iframe க்கும் இடையே செய்தி அனுப்ப அனுமதிக்கிறது. புதிய PDF URL உள்ள செய்தியை iframe க்கு அனுப்புவதன் மூலம், PDF பார்வையாளர் மாறும் வகையில் புதுப்பிக்கப்படும்.

DOM முழுமையாக ஏற்றப்படும் போது மட்டுமே ஸ்கிரிப்ட் இயங்கும் என்பதை உறுதிசெய்ய, நாங்கள் இதைப் பயன்படுத்துகிறோம் DOMContentLoaded நிகழ்வு. இது கீழ்தோன்றும் கூறுகள் மற்றும் PSPDFKit கொள்கலனை ஸ்கிரிப்ட் அணுகுவதை உறுதி செய்கிறது. ஒவ்வொரு கீழ்தோன்றும் நிகழ்வு கேட்பவர்களையும் நாங்கள் சேர்க்கிறோம். பயனர் ஒரு வருடம் அல்லது மாதத்தைத் தேர்ந்தெடுக்கும்போது, ​​தொடர்புடைய நிகழ்வு கேட்பவர் தேர்வைப் படம்பிடித்து, சரியான URL உடன் PDF பார்வையாளரை மீண்டும் ஏற்றுவதற்கான செயல்பாட்டை அழைக்கிறார். கீழ்தோன்றல்களில் தேர்ந்தெடுக்கப்பட்ட மதிப்புகளிலிருந்து URL ஐ உருவாக்க டெம்ப்ளேட் எழுத்துக்களைப் பயன்படுத்தும் எளிய செயல்பாட்டின் மூலம் இது கையாளப்படுகிறது. இந்த முறை செயல்படுத்த எளிதானது மட்டுமல்ல, மிகவும் மட்டுமானது, புதிய காப்பகங்கள் சேர்க்கப்படும்போது எளிதாக மேம்படுத்தலை அனுமதிக்கிறது.

இரண்டாவது அணுகுமுறையில், நாங்கள் பயன்படுத்துகிறோம் postMessage() பெற்றோர் பக்கத்திற்கும் iFrame க்கும் இடையே தொடர்பு கொள்ள. பெற்றோர் பக்கம் கீழ்தோன்றும் மாற்றங்களைக் கேட்கிறது மற்றும் புதிய PDF URL ஐக் கொண்ட செய்தியை iFrame க்கு அனுப்புகிறது, இது நிகழ்வு கேட்பவரைப் பயன்படுத்தி செய்தியைப் பெறுகிறது. பெற்றோர் பக்கத்தின் DOM உடன் iframe நேரடியாக தொடர்பு கொள்ள முடியாத தனிமைப்படுத்தப்பட்ட சூழல்களைக் கையாளும் போது இந்த முறை பயனுள்ளதாக இருக்கும். இரண்டு முறைகளும் உட்பொதிக்கப்பட்ட PDF பார்வையாளரின் உள்ளடக்கத்தை மாறும் வகையில் புதுப்பிப்பதற்கான திறமையான வழிகளை வழங்குகின்றன, பல நிலையான பக்கங்களின் தேவையைக் குறைக்கின்றன மற்றும் பயனர் நட்பு உலாவல் அனுபவத்தை வழங்குகின்றன.

// 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 மற்றும் JavaScript செய்தியிடல் மூலம் PDF காப்பக அணுகலை மேம்படுத்துகிறது

Wix இல் உட்பொதிக்கப்பட்ட PDF URL ஐ மாற்றியமைக்க கீழ்தோன்றும் கூறுகளைப் பயன்படுத்தும் போது மற்றொரு முக்கியமான கருத்தாகும். iFrame மற்றும் முக்கிய பக்கம் திறமையானது. JavaScript செய்தியிடல் இந்த இரண்டு கூறுகளுக்கு இடையில் தரவை அனுப்ப அனுமதிக்கும் அதே வேளையில், தேர்வு எவ்வாறு புதுப்பிப்புகளைத் தூண்டுகிறது என்பதை மேம்படுத்துவதன் மூலம் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்தலாம். உள்ளீட்டை நீக்குவதன் மூலம் இதைச் செய்யலாம், அதாவது ஒவ்வொரு மாற்றத்திலும் இல்லாமல், பயனர் அவர்களின் தேர்வை முடித்த பின்னரே கணினி PDF பார்வையாளரைப் புதுப்பிக்கிறது.

இன்னும் கவனிக்கப்படாத மற்றொரு அம்சம் குறுக்கு மூல வள பகிர்வு (CORS). PDFகள் வெளிப்புற சர்வரில் (டிஜிட்டல் ஓஷன் போன்றவை) ஹோஸ்ட் செய்யப்பட்டுள்ளதால், Wix டொமைனில் இருந்து அணுகலை அனுமதிக்கும் வகையில் சர்வர் கட்டமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்துவது மிகவும் முக்கியமானது. சேவையகத்தின் CORS அமைப்புகள் சரியாக உள்ளமைக்கப்படவில்லை என்றால், PDF பார்வையாளரால் ஆவணத்தை ஏற்ற முடியாமல் போகலாம், இதன் விளைவாக பிழைகள் ஏற்படும். PDF கோப்புகளை வழங்கும் சர்வரில் சரியான CORS தலைப்புகள் இரண்டு தளங்களுக்கிடையில் தடையற்ற ஒருங்கிணைப்புக்கு அவசியம்.

கூடுதலாக, ஏற்றும் நேரத்தைக் குறைக்க அடிக்கடி அணுகப்படும் PDF கோப்புகளை முன் ஏற்றுவதன் மூலம் கணினியை மேம்படுத்தலாம். பயனர் பல மாதங்கள் அல்லது ஆண்டுகளுக்கு இடையில் மாறக்கூடிய போது முன் ஏற்றுதல் உத்திகள் பயனுள்ளதாக இருக்கும். இந்த கோப்புகளை உலாவியின் தற்காலிக சேமிப்பில் சேமிப்பதன் மூலம், அடுத்தடுத்த ஆவண ஏற்றங்கள் வேகமாக இருக்கும், இது ஒரு மென்மையான பயனர் அனுபவத்தை வழங்கும். சேவை பணியாளர்கள் அல்லது பிற கேச்சிங் பொறிமுறைகளைப் பயன்படுத்தி இதைச் செய்யலாம், பயனர்கள் கிடைக்கக்கூடிய விருப்பங்கள் மூலம் செல்லும்போது PDFகளை முன்கூட்டியே ஏற்றுவதற்கு அமைக்கலாம்.