Angular का उपयोग करके Iframe में PHP पेज रीलोड का पता लगाना

कोणीय अनुप्रयोगों में आईफ्रेम रीलोड को संभालना

आधुनिक वेब विकास में, एक आईफ्रेम के माध्यम से एक एंगुलर प्रोजेक्ट के अंदर एक PHP पेज जैसे बाहरी अनुप्रयोगों को एम्बेड करना एक सामान्य दृष्टिकोण है। हालाँकि, यह उस आईफ्रेम के भीतर घटनाओं या पृष्ठ पुनः लोड की निगरानी करने का प्रयास करते समय चुनौतियां पेश करता है, खासकर जब आपके पास PHP प्रोजेक्ट के कोड तक पहुंच नहीं है।

ऐसी ही एक चुनौती तब उत्पन्न होती है जब आपको आईफ्रेम सामग्री को ताज़ा करने पर अपने एंगुलर एप्लिकेशन में एक लोडिंग स्पिनर प्रदर्शित करने की आवश्यकता होती है। चूँकि आप PHP कोड को संशोधित नहीं कर सकते, इसलिए iframe सामग्री में पुनः लोड या परिवर्तन का पता लगाना मुश्किल हो जाता है। कुंजी जावास्क्रिप्ट पक्ष से आईफ्रेम में परिवर्तनों को ट्रैक करने का एक तरीका ढूंढ रही है।

कई डेवलपर्स आश्चर्य करते हैं कि क्या आईफ्रेम में एक स्क्रिप्ट को इंजेक्ट करना संभव है जो HTTP अनुरोधों या पुनः लोड जैसी घटनाओं को सुनता है, खासकर यदि आईफ्रेम किसी प्रोजेक्ट से प्राप्त किया गया है जहां आपके पास कोड पर प्रत्यक्ष नियंत्रण नहीं है। यह संभावित रूप से आपके एंगुलर एप्लिकेशन में जावास्क्रिप्ट के माध्यम से किया जा सकता है।

इस आलेख में, हम यह पता लगाने के संभावित समाधानों का पता लगाएंगे कि आईफ्रेम के अंदर एक PHP पेज कब पुनः लोड हो रहा है, और आप ऐसे परिवर्तनों के जवाब में लोडिंग स्पिनर को कैसे कार्यान्वित कर सकते हैं। हालाँकि आपके पास स्वयं PHP कोड तक पहुंच नहीं है, जावास्क्रिप्ट रचनात्मक समाधान प्रदान कर सकता है।

एंगुलर में आईफ्रेम रीलोड का पता लगाने के लिए समाधान तलाशना

पहली स्क्रिप्ट में, मुख्य विचार सुनना है भार आईफ्रेम की घटना. हर बार जब iframe की सामग्री बदलती है या पुनः लोड होती है तो लोड इवेंट ट्रिगर हो जाता है। इस इवेंट का उपयोग करके, हम यह पता लगा सकते हैं कि आईफ्रेम के अंदर PHP पेज कब रीफ्रेश होता है। प्रारंभ में, लोडिंग स्पिनर को फ़ंक्शन को कॉल करके दिखाया जाता है शोस्पिनर. एक बार जब आईफ्रेम सामग्री पूरी तरह से लोड हो जाती है, तो छिपाओस्पिनर स्पिनर को छिपाने के लिए फ़ंक्शन को कॉल किया जाता है। यह विधि काफी कुशल है क्योंकि इसमें PHP कोड तक पहुंच की आवश्यकता नहीं होती है, और यह केवल आईफ्रेम की स्थिति पर निर्भर करता है।

दूसरा समाधान जावास्क्रिप्ट को सीधे आईफ्रेम में इंजेक्ट करके अधिक उन्नत दृष्टिकोण अपनाता है। iframe तक पहुंच कर सामग्रीविंडो, हम गतिशील रूप से iframe के DOM में एक स्क्रिप्ट तत्व बना और सम्मिलित कर सकते हैं। यह स्क्रिप्ट दोनों का उपयोग करके आईफ्रेम के अंदर PHP पेज द्वारा शुरू किए गए किसी भी HTTP अनुरोध को ट्रैक करती है XMLHttpRequest और यह एपीआई लायें. यहां लक्ष्य आईफ्रेम के भीतर नेटवर्क गतिविधि की निगरानी करना और ऐसी कोई गतिविधि होने पर लोडिंग स्पिनर को प्रदर्शित करना है। यह दृष्टिकोण HTTP अनुरोध किए जाने के सटीक क्षण को ट्रैक करके अधिक विस्तृत नियंत्रण प्रदान करता है।

तीसरी विधि इसका लाभ उठाती है पोस्टमैसेज एपीआई, जो आईफ्रेम और पैरेंट एंगुलर एप्लिकेशन के बीच संचार की अनुमति देता है। इस मामले में, जब भी आईफ्रेम लोडिंग समाप्त करता है तो पैरेंट को एक संदेश भेजता है। पैरेंट विंडो इन संदेशों को सुनती है और तदनुसार स्पिनर को दिखाती या छिपाती है। पोस्टमैसेज का उपयोग करने का लाभ यह है कि यह विंडोज़ के बीच सूचनाओं के आदान-प्रदान का एक सुरक्षित तरीका है, तब भी जब आपके पास आईफ्रेम के आंतरिक कोड तक पहुंच नहीं है। यह क्रॉस-ओरिजिनल आईफ्रेम के लिए आदर्श है जहां पैरेंट और आईफ्रेम अलग-अलग डोमेन से आते हैं।

इनमें से प्रत्येक समाधान की अपनी ताकत है, और विधि का चुनाव आपके लिए आवश्यक नियंत्रण के स्तर और आईफ्रेम के व्यवहार पर निर्भर करता है। लोड इवेंट श्रोता सरल है लेकिन केवल पूर्ण पुनः लोड का पता लगाने के लिए काम करता है। किसी स्क्रिप्ट को आईफ्रेम में इंजेक्ट करने से उसकी गतिविधि के बारे में अधिक विस्तृत जानकारी मिलती है, लेकिन स्क्रिप्ट को सम्मिलित करने की अनुमति देने के लिए आईफ्रेम की आवश्यकता होती है। अंततः पोस्टमैसेज यह विधि क्रॉस-डोमेन संचार को संभालने के लिए एक मजबूत समाधान है और माता-पिता को विशिष्ट आईफ्रेम घटनाओं के बारे में सूचित कर सकती है। ये विधियां 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);

कोणीय में आईफ्रेम परिवर्तन की निगरानी के लिए उन्नत तकनीकें

आईफ्रेम में परिवर्तनों का पता लगाने के लिए एक और दिलचस्प तकनीक का उपयोग करना है उत्परिवर्तनपर्यवेक्षक एपीआई. यह एपीआई आपको DOM ट्री में परिवर्तनों की निगरानी करने की अनुमति देता है, जैसे कि जब नए नोड जोड़े या हटाए जाते हैं। हालाँकि यह PHP पृष्ठ पुनः लोड होने पर आपको सीधे सूचित नहीं करेगा, यह iframe की सामग्री में परिवर्तनों का पता लगाने में मदद कर सकता है। उदाहरण के लिए, यदि आईफ्रेम में कुछ तत्वों को पुनः लोड करने के बाद बदल दिया जाता है या अद्यतन किया जाता है, तो उत्परिवर्तनपर्यवेक्षक उन परिवर्तनों को पकड़ सकता है और तदनुसार स्पिनर को ट्रिगर कर सकता है।

इसके अतिरिक्त, जैसे ब्राउज़र ईवेंट का लाभ उठाना उतारने से पहले या अनलोड यह पता लगाने में मदद कर सकता है कि आईफ्रेम कब पुनः लोड होने वाला है। ये घटनाएँ तब सक्रिय होती हैं जब पृष्ठ अनलोड किया जा रहा होता है या जब वर्तमान पृष्ठ से दूर नेविगेशन शुरू किया जाता है। आईफ्रेम के अंदर इन घटनाओं में इवेंट श्रोताओं को जोड़कर, आप मूल विंडो को सूचित कर सकते हैं कि पुनः लोड होने वाला है, यह सुनिश्चित करते हुए कि स्पिनर सही समय पर दिखाया गया है। यह विधि अन्य दृष्टिकोणों के साथ संयुक्त होने पर सबसे अच्छा काम करती है, और एक व्यापक समाधान प्रदान करती है।

अंत में, आप परिवर्तनों की जांच के लिए एक विधि के रूप में आईफ्रेम पोलिंग का उपयोग करने पर विचार कर सकते हैं। इस पद्धति में, पैरेंट एंगुलर ऐप समय-समय पर जाँच करता है iframe यह निर्धारित करने के लिए कि सामग्री बदल गई है या पुनः लोड की गई है, आईफ्रेम के भीतर यूआरएल या अन्य विशिष्ट तत्व। हालाँकि यह दृष्टिकोण कम कुशल हो सकता है, विशेष रूप से प्रदर्शन के मामले में, यह एक वैकल्पिक विकल्प है जब अन्य तरीके संभव नहीं होते हैं। नकारात्मक पक्ष यह है कि मतदान सभी इन-पेज परिवर्तनों का पता नहीं लगा सकता है लेकिन फिर भी विशिष्ट परिदृश्यों के लिए उपयोगी हो सकता है।