اكتشاف إعادة تحميل صفحة PHP في Iframe باستخدام Angular

التعامل مع عمليات إعادة تحميل Iframe في التطبيقات الزاويّة

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

ينشأ أحد هذه التحديات عندما تحتاج إلى عرض أداة التحميل الدوارة في تطبيق Angular الخاص بك كلما تم تحديث محتوى iframe. نظرًا لأنه لا يمكنك تعديل كود PHP، يصبح اكتشاف عمليات إعادة التحميل أو التغييرات في محتوى iframe أمرًا صعبًا. المفتاح هو إيجاد طريقة لتتبع التغييرات في iframe من جانب JavaScript.

يتساءل العديد من المطورين عما إذا كان من الممكن إدخال برنامج نصي في iframe يستمع إلى أحداث مثل طلبات HTTP أو عمليات إعادة التحميل، خاصة إذا كان مصدر iframe من مشروع لا تملك فيه التحكم المباشر في التعليمات البرمجية. من المحتمل أن يتم ذلك من خلال JavaScript في تطبيق Angular الخاص بك.

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

استكشاف الحلول لاكتشاف عمليات إعادة تحميل Iframe في Angular

في النص الأول، الفكرة الأساسية هي الاستماع إلى حمولة حدث iframe. يتم تشغيل حدث التحميل في كل مرة يتغير فيها محتوى إطار iframe أو يُعاد تحميله. باستخدام هذا الحدث، يمكننا اكتشاف متى يتم تحديث صفحة PHP داخل إطار iframe. في البداية، يتم عرض قرص التحميل عن طريق استدعاء الوظيفة com.showSpinner. بمجرد تحميل محتوى iframe بالكامل، سيظهر ملف hackSpinner يتم استدعاء الدالة لإخفاء الدوار. هذه الطريقة فعالة جدًا لأنها لا تتطلب الوصول إلى كود PHP، وتعتمد ببساطة على حالة iframe.

يتخذ الحل الثاني أسلوبًا أكثر تقدمًا عن طريق إدخال JavaScript مباشرةً في إطار iframe. من خلال الوصول إلى iframe contentWindow، يمكننا إنشاء عنصر نصي وإدراجه ديناميكيًا في DOM الخاص بإطار iframe. يتتبع هذا البرنامج النصي أي طلبات HTTP تبدأها صفحة PHP داخل إطار iframe، باستخدام كل من XMLHttpRequest و جلب واجهة برمجة التطبيقات. الهدف هنا هو مراقبة نشاط الشبكة داخل إطار iframe وعرض قرص التحميل عند حدوث أي نشاط من هذا القبيل. يوفر هذا الأسلوب تحكمًا أكثر دقة من خلال تتبع اللحظة الدقيقة التي يتم فيها تقديم طلبات HTTP.

الطريقة الثالثة تعتمد على postMessage API، الذي يسمح بالاتصال بين iframe والتطبيق Angular الأصلي. في هذه الحالة، يرسل إطار iframe رسالة إلى الأصل عند انتهاء التحميل. تستمع النافذة الرئيسية لهذه الرسائل وتظهر القرص الدوار أو تخفيه وفقًا لذلك. تتمثل ميزة استخدام postMessage في أنها طريقة آمنة لتبادل المعلومات بين النوافذ، حتى عندما لا يكون لديك إمكانية الوصول إلى التعليمات البرمجية الداخلية لإطار iframe. إنه مثالي لإطارات iframe المشتركة الأصل حيث يأتي الأصل وiframe من نطاقات مختلفة.

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

// Select the iframe element by its ID or query selector
const iframe = document.getElementById("myIframe");
// Function to display the spinner
function showSpinner() {
  document.getElementById("spinner").style.display = "block";
}
// Function to hide the spinner
function hideSpinner() {
  document.getElementById("spinner").style.display = "none";
}
// Add event listener for the iframe's load event
iframe.addEventListener("load", function() {
  hideSpinner();
});
// Display the spinner initially before iframe reload completes
showSpinner();
// HTML: Loading spinner (CSS or image-based)
<div id="spinner" style="display: none;">Loading...</div>

// Access the iframe's content window
const iframe = document.querySelector("iframe").contentWindow;
// Create a script to inject into the iframe
const script = iframe.document.createElement('script');
// JavaScript to track network requests
script.textContent = `
  (function() {
    const oldFetch = window.fetch;
    window.fetch = function() {
      document.querySelector('#spinner').style.display = 'block';
      return oldFetch.apply(this, arguments);
    };
    const oldXHR = window.XMLHttpRequest;
    XMLHttpRequest.prototype.open = function() {
      document.querySelector('#spinner').style.display = 'block';
      oldXHR.open.apply(this, arguments);
    };
  })();`;
// Append the script to the iframe's document
iframe.document.body.appendChild(script);

// Parent script (Angular application)
const iframe = document.querySelector("iframe");
// Listen for messages from the iframe
window.addEventListener("message", function(event) {
  if (event.data === "iframeReloaded") {
    document.getElementById("spinner").style.display = "none";
  }
});
// Iframe script to post a message on reload
const iframeScript = document.createElement('script');
iframeScript.textContent = `
  window.onload = function() {
    parent.postMessage("iframeReloaded", "*");
  };`;
// Inject the script into the iframe
iframe.contentWindow.document.body.appendChild(iframeScript);

التقنيات المتقدمة لرصد تغييرات Iframe في Angular

هناك أسلوب آخر مثير للاهتمام لاكتشاف التغييرات في إطار iframe وهو استخدام MutationObserver واجهة برمجة التطبيقات. تسمح لك واجهة برمجة التطبيقات هذه بمراقبة التغييرات في شجرة DOM، مثل عند إضافة عقد جديدة أو إزالتها. على الرغم من أن هذا لن ينبهك مباشرة عند إعادة تحميل صفحة PHP، إلا أنه يمكن أن يساعد في اكتشاف التغييرات في محتوى iframe. على سبيل المثال، إذا تم استبدال عناصر معينة في إطار iframe أو تحديثها بعد إعادة التحميل، فسيتم حذف MutationObserver يمكنه التقاط هذه التغييرات وتشغيل القرص الدوار وفقًا لذلك.

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

وأخيرًا، يمكنك التفكير في استخدام استقصاء iframe كطريقة للتحقق من التغييرات. في هذه الطريقة، يقوم تطبيق Angular الأصلي بفحص البيانات بشكل دوري com.iframe عنوان URL أو عناصر محددة أخرى داخل إطار iframe لتحديد ما إذا كان المحتوى قد تغير أو أعيد تحميله. في حين أن هذا النهج يمكن أن يكون أقل كفاءة، خاصة فيما يتعلق بالأداء، إلا أنه خيار احتياطي عندما لا تكون الطرق الأخرى مجدية. الجانب السلبي هو أن الاستقصاء قد لا يكشف عن جميع التغييرات في الصفحة ولكنه لا يزال مفيدًا لسيناريوهات محددة.