జావాస్క్రిప్ట్ సందేశాన్ని ఉపయోగించి Wixలో డ్రాప్‌డౌన్ నడిచే PDF URL స్విచింగ్‌ను సమగ్రపరచడం

Wix లైబ్రరీ సైట్‌లో PDF వ్యూయర్ ఫంక్షనాలిటీని మెరుగుపరచడం

పబ్లిక్ లైబ్రరీ వెబ్‌సైట్‌లో వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి PDF ఫైల్‌ల యొక్క విస్తారమైన ఆర్కైవ్‌ను వ్యవస్థీకృత మరియు వినియోగదారు-స్నేహపూర్వక పద్ధతిలో ప్రదర్శించడం చాలా కీలకం. PDFలుగా నిల్వ చేయబడిన పాత వార్తాపత్రికల వంటి చారిత్రక రికార్డులను సందర్శకులకు అతుకులు లేకుండా అందించడమే లక్ష్యం. ఈ ప్రాజెక్ట్‌లో, Wix, Velo మరియు HTML పొందుపరిచిన మూలకం యొక్క ఉపయోగం బలమైన సిస్టమ్‌కు పునాదిని సృష్టిస్తుంది.

Wix యొక్క ప్లాట్‌ఫారమ్ iframes ద్వారా పొందుపరిచిన అంశాలకు మద్దతు ఇస్తుంది, PDF వీక్షకుల వంటి ఇంటరాక్టివ్ భాగాలను జోడించడానికి వినియోగదారులను అనుమతిస్తుంది. ఈ PDF వీక్షకుడు iframeని ఉపయోగించి పొందుపరచబడింది మరియు ప్రస్తుతం, ఏ పత్రం ప్రదర్శించబడుతుందో స్టాటిక్ URL నిర్వచిస్తుంది. అయినప్పటికీ, వినియోగదారు ఇన్‌పుట్ ఆధారంగా PDF ఫైల్‌ను డైనమిక్‌గా మార్చాల్సిన అవసరం సాఫీ అనుభవం కోసం చాలా అవసరం.

రెండు డ్రాప్‌డౌన్‌ల నుండి ఒక సంవత్సరం మరియు ఒక నెలను ఎంచుకోవడానికి వినియోగదారులను అనుమతించడం సవాలు, ఇది ప్రదర్శించబడే PDF పత్రంలో మార్పును ప్రేరేపిస్తుంది. ఐఫ్రేమ్‌తో కమ్యూనికేట్ చేయడానికి జావాస్క్రిప్ట్ సందేశాన్ని ఏకీకృతం చేయడం, డ్రాప్‌డౌన్ ఎంపికల ప్రకారం డాక్యుమెంట్ యొక్క URL మార్చడానికి వీలు కల్పిస్తుంది.

ఈ విధానం అనేక స్టాటిక్ Wix పేజీల అవసరాన్ని తగ్గించడమే కాకుండా లైబ్రరీ యొక్క PDF ఆర్కైవ్‌కు ప్రాప్యతను సులభతరం చేస్తుంది. దిగువన, మేము Velo ఫ్రేమ్‌వర్క్ మరియు JavaScriptను ఉపయోగించి దీన్ని అమలు చేయడానికి అవసరమైన దశలు మరియు పరిష్కారాలను అన్వేషిస్తాము.

Wixలో డ్రాప్‌డౌన్ ఎంపికలతో డైనమిక్ PDF లోడ్ అవుతోంది

ఈ పరిష్కారంలో, పొందుపరిచిన iFrameలో ప్రదర్శించబడే PDF ఫైల్ యొక్క URLని డైనమిక్‌గా సవరించడానికి మేము Wix పేజీలో ఒక జత డ్రాప్‌డౌన్ మూలకాలను ఉపయోగిస్తాము. ఆర్కైవ్ చేసిన వార్తాపత్రిక PDFలకు సులభంగా యాక్సెస్ అందించాలని చూస్తున్న పబ్లిక్ లైబ్రరీలకు ఈ వ్యవస్థ ప్రత్యేకంగా ఉపయోగపడుతుంది. కోర్ ఫంక్షనాలిటీ ఆధారితమైనది జావాస్క్రిప్ట్ సందేశం, ఇది డ్రాప్‌డౌన్‌ల నుండి వినియోగదారు ఎంపికలను పొందుపరిచిన 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తో 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లను ప్రీలోడ్ చేయడానికి సెటప్ చేయవచ్చు.