دمج تبديل عناوين URL لملفات PDF المستندة إلى القائمة المنسدلة في Wix باستخدام رسائل JavaScript

تحسين وظيفة عارض PDF على موقع مكتبة Wix

يعد عرض أرشيف ضخم من ملفات PDF بطريقة منظمة وسهلة الاستخدام أمرًا بالغ الأهمية لتحسين تجربة المستخدم على موقع الويب الخاص بالمكتبة العامة. الهدف هو منح الزائرين إمكانية الوصول السلس إلى السجلات التاريخية مثل الصحف القديمة، والتي يتم تخزينها كملفات PDF. في هذا المشروع، يؤدي استخدام Wix وVelo وعنصر تضمين HTML إلى إنشاء الأساس لنظام قوي.

تدعم منصة Wix العناصر المضمنة من خلال إطارات iframe، مما يسمح للمستخدمين بإضافة مكونات تفاعلية مثل عارضات PDF. تم تضمين عارض PDF هذا باستخدام iframe، وحاليًا، يحدد عنوان URL الثابت المستند الذي سيتم عرضه. ومع ذلك، فإن الحاجة إلى تغيير ملف PDF ديناميكيًا بناءً على إدخال المستخدم أمر ضروري للحصول على تجربة سلسة.

ويتمثل التحدي في السماح للمستخدمين باختيار سنة وشهر من قائمتين منسدلتين، الأمر الذي سيؤدي بعد ذلك إلى إجراء تغيير في مستند PDF المعروض. يتضمن ذلك دمج رسائل JavaScript للتواصل مع إطار iframe، مما يتيح تغيير عنوان URL للمستند وفقًا لتحديدات القائمة المنسدلة.

لا يقلل هذا الأسلوب من الحاجة إلى العديد من صفحات Wix الثابتة فحسب، بل يبسط أيضًا الوصول إلى أرشيف PDF الخاص بالمكتبة. نستكشف أدناه الخطوات والحلول اللازمة لتنفيذ ذلك باستخدام إطار عمل Velo وJavaScript.

تحميل PDF ديناميكي مع التحديدات المنسدلة في Wix

في هذا الحل، نستخدم زوجًا من العناصر المنسدلة في صفحة Wix لتعديل عنوان URL لملف PDF المعروض داخل iFrame المضمن ديناميكيًا. يعد هذا النظام مفيدًا بشكل خاص للمكتبات العامة التي تتطلع إلى توفير وصول سهل إلى ملفات PDF الخاصة بالصحف المؤرشفة. يتم تشغيل الوظيفة الأساسية بواسطة رسائل جافا سكريبت، والذي يرسل تحديدات المستخدم من القوائم المنسدلة إلى عارض PDF المضمن. يتم استخدام عارض PSPDFKit لعرض ملفات PDF داخل iFrame، ونتعامل مع العارض عن طريق تغيير عنوان URL بناءً على اختيار المستخدم للسنة والشهر. يوفر هذا طريقة مبسطة لعرض الأرشيفات الكبيرة دون إنشاء صفحات Wix ثابتة متعددة.

تحدد القائمة المنسدلة الأولى السنة، بينما تحدد القائمة المنسدلة الثانية الشهر. عندما يحدد المستخدم كليهما، يقوم النظام بإنشاء عنوان URL المناسب لملف PDF المقابل. ال PSDFKit.load() تعد هذه الطريقة أساسية في ذلك، حيث تقوم بتحميل ملف PDF الجديد في iFrame بناءً على عنوان URL المحدث. تعد هذه الطريقة جزءًا من مكتبة PSPDFKit، المضمنة في الصفحة من خلال برنامج نصي خارجي. ال بريد الرسالة () تعد واجهة برمجة التطبيقات أيضًا أمرًا بالغ الأهمية في الحل البديل، والذي يسمح بالمراسلة بين الصفحة الرئيسية وإطار iframe. من خلال إرسال رسالة تحتوي على عنوان URL الجديد لملف PDF إلى إطار iframe، يتم تحديث عارض PDF ديناميكيًا.

للتأكد من أن البرنامج النصي يعمل فقط عند تحميل DOM بالكامل، نستخدم التابع DOMContentLoaded حدث. وهذا يضمن إمكانية الوصول إلى عناصر القائمة المنسدلة وحاوية PSPDFKit من خلال البرنامج النصي. نضيف أيضًا مستمعي الأحداث إلى كل قائمة منسدلة. عندما يحدد المستخدم سنة أو شهرًا، يلتقط مستمع الحدث المقابل التحديد ويستدعي وظيفة لإعادة تحميل عارض PDF بعنوان URL الصحيح. تتم معالجة ذلك من خلال وظيفة بسيطة تستخدم القيم الحرفية للنموذج لإنشاء عنوان URL من القيم المحددة في القوائم المنسدلة. هذه الطريقة ليست سهلة التنفيذ فحسب، بل إنها أيضًا معيارية للغاية، مما يسمح بإجراء تحديثات سهلة عند إضافة أرشيفات جديدة.

وفي الطريقة الثانية نستخدم بريد الرسالة () للتواصل بين الصفحة الأصلية وiFrame. تستمع الصفحة الأصلية إلى تغييرات القائمة المنسدلة وترسل رسالة تحتوي على عنوان URL الجديد لملف PDF إلى iFrame، الذي يتلقى الرسالة باستخدام مستمع الأحداث. تكون هذه الطريقة مفيدة عند التعامل مع بيئات أكثر عزلة حيث لا يمكن لإطار iframe التفاعل مباشرة مع DOM الخاص بالصفحة الرئيسية. توفر كلتا الطريقتين طرقًا فعالة لتحديث محتوى عارض 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>

تحسين إمكانية الوصول إلى أرشيف PDF باستخدام رسائل Wix وJavaScript

هناك اعتبار مهم آخر عند استخدام عناصر القائمة المنسدلة لتعديل عنوان URL لملف PDF المضمن ديناميكيًا في Wix وهو التأكد من أن التفاعل بين ملفات iFrame والصفحة الرئيسية فعالة. بينما تسمح لنا رسائل JavaScript بإرسال البيانات بين هذين المكونين، يمكن تحسين الأداء وتجربة المستخدم من خلال تحسين كيفية قيام التحديد بتشغيل التحديثات. يمكن القيام بذلك عن طريق إلغاء الإدخال، مما يعني أن النظام يقوم فقط بتحديث عارض PDF بعد أن يكمل المستخدم تحديده، وليس عند كل تغيير.

الجانب الآخر الذي لم يتم تغطيته بعد هو مشاركة الموارد عبر الأصل (CORS). نظرًا لأن ملفات PDF مستضافة على خادم خارجي (مثل Digital Ocean)، فمن الضروري التأكد من تكوين الخادم للسماح بالوصول من مجال Wix. إذا لم يتم تكوين إعدادات CORS الخاصة بالخادم بشكل صحيح، فقد لا يتمكن عارض PDF من تحميل المستند، مما يؤدي إلى حدوث أخطاء. تعد رؤوس CORS المناسبة على الخادم الذي يستضيف ملفات PDF ضرورية للتكامل السلس بين النظامين الأساسيين.

بالإضافة إلى ذلك، يمكنك تحسين النظام عن طريق التحميل المسبق لملفات PDF التي يتم الوصول إليها بشكل متكرر لتقليل أوقات التحميل. تكون إستراتيجيات التحميل المسبق مفيدة عندما يكون من المحتمل أن يقوم المستخدم بالتبديل بين عدة أشهر أو سنوات. ومن خلال تخزين هذه الملفات في ذاكرة التخزين المؤقت للمتصفح، ستكون عمليات تحميل المستندات اللاحقة أسرع، مما يوفر تجربة مستخدم أكثر سلاسة. يمكن القيام بذلك باستخدام عمال الخدمة أو آليات التخزين المؤقت الأخرى، والتي يمكن إعدادها للتحميل المسبق لملفات PDF أثناء تنقل المستخدم عبر الخيارات المتاحة.