कोनीय वापरून आयफ्रेममध्ये PHP पृष्ठ रीलोड शोधणे

कोनीय अनुप्रयोगांमध्ये Iframe रीलोड्स हाताळणे

आधुनिक वेब डेव्हलपमेंटमध्ये, PHP पेज सारखे बाह्य ॲप्लिकेशन्स अँगुलर प्रोजेक्टमध्ये iframe द्वारे एम्बेड करणे ही एक सामान्य पद्धत आहे. तथापि, त्या आयफ्रेममध्ये इव्हेंट किंवा पृष्ठ रीलोड करण्याचा प्रयत्न करताना ते आव्हाने सादर करते, विशेषत: जेव्हा आपल्याकडे PHP प्रकल्पाच्या कोडमध्ये प्रवेश नसतो.

जेव्हाही iframe सामग्री रीफ्रेश केली जाते तेव्हा तुम्हाला तुमच्या अँगुलर ऍप्लिकेशनमध्ये लोडिंग स्पिनर प्रदर्शित करण्याची आवश्यकता असते तेव्हा असे एक आव्हान उद्भवते. तुम्ही PHP कोड सुधारू शकत नसल्यामुळे, iframe सामग्रीमध्ये रीलोड किंवा बदल शोधणे अवघड होते. मुख्य म्हणजे JavaScript बाजूने iframe मधील बदलांचा मागोवा घेण्याचा मार्ग शोधणे.

एचटीटीपी विनंत्या किंवा रीलोड सारख्या इव्हेंटसाठी ऐकणाऱ्या iframe मध्ये स्क्रिप्ट इंजेक्ट करणे शक्य आहे की नाही याबद्दल अनेक विकासकांना आश्चर्य वाटते, विशेषत: जर iframe एखाद्या प्रोजेक्टमधून प्राप्त केली गेली असेल जिथे आपल्याकडे कोडवर थेट नियंत्रण नसेल. हे तुमच्या अँगुलर ऍप्लिकेशनमध्ये JavaScript द्वारे संभाव्यपणे केले जाऊ शकते.

या लेखात, iframe मधील PHP पेज केव्हा रीलोड होत आहे हे शोधण्यासाठी आम्ही संभाव्य उपाय शोधू आणि अशा बदलांना प्रतिसाद म्हणून तुम्ही लोडिंग स्पिनर कसे लागू करू शकता. आपल्याकडे PHP कोडमध्ये प्रवेश नसला तरीही, JavaScript सर्जनशील उपाय देऊ शकते.

कोनीय मध्ये Iframe रीलोड शोधण्यासाठी उपाय शोधत आहे

पहिल्या स्क्रिप्टमध्ये, मुख्य कल्पना ऐकण्यासाठी आहे भार iframe चा कार्यक्रम. प्रत्येक वेळी iframe ची सामग्री बदलते किंवा रीलोड होते तेव्हा लोड इव्हेंट ट्रिगर केला जातो. हा कार्यक्रम वापरून, iframe मधील PHP पेज रीफ्रेश केव्हा होते ते आम्ही शोधू शकतो. सुरुवातीला, लोडिंग स्पिनर फंक्शनला कॉल करून दर्शविले जाते शोस्पिनर. एकदा iframe सामग्री पूर्णपणे लोड झाल्यानंतर, द स्पिनर लपवा फंक्शनला स्पिनर लपवण्यासाठी म्हणतात. ही पद्धत बरीच कार्यक्षम आहे कारण तिला PHP कोडमध्ये प्रवेश आवश्यक नाही आणि फक्त iframe च्या स्थितीवर अवलंबून आहे.

दुसरा उपाय थेट iframe मध्ये JavaScript इंजेक्ट करून अधिक प्रगत दृष्टिकोन घेतो. iframe मध्ये प्रवेश करून सामग्री विंडो, आम्ही गतिकरित्या iframe च्या DOM मध्ये स्क्रिप्ट घटक तयार करू शकतो आणि घालू शकतो. ही स्क्रिप्ट दोन्हीचा वापर करून, iframe मध्ये PHP पृष्ठाद्वारे सुरू केलेल्या कोणत्याही HTTP विनंत्या ट्रॅक करते XMLHttp विनंती आणि API आणा. iframe मधील नेटवर्क क्रियाकलापांचे निरीक्षण करणे आणि अशी कोणतीही गतिविधी उद्भवल्यास लोडिंग स्पिनर प्रदर्शित करणे हे येथे लक्ष्य आहे. HTTP विनंत्या केल्या गेल्याच्या अचूक क्षणाचा मागोवा घेऊन हा दृष्टिकोन अधिक बारीक नियंत्रण प्रदान करतो.

तिसरी पद्धत लाभ घेते पोस्ट मेसेज API, जे iframe आणि पॅरेंट अँगुलर ऍप्लिकेशन दरम्यान संप्रेषण करण्यास अनुमती देते. या प्रकरणात, iframe लोडिंग पूर्ण झाल्यावर पालकांना संदेश पाठवते. पालक विंडो हे संदेश ऐकते आणि त्यानुसार स्पिनर दाखवते किंवा लपवते. postMessage वापरण्याचा फायदा असा आहे की तुमच्याकडे iframe च्या अंतर्गत कोडमध्ये प्रवेश नसतानाही, विंडोज दरम्यान माहितीची देवाणघेवाण करण्याचा हा एक सुरक्षित मार्ग आहे. हे क्रॉस-ओरिजिन iframes साठी आदर्श आहे जिथे पालक आणि iframe वेगवेगळ्या डोमेनमधून येतात.

यापैकी प्रत्येक सोल्यूशनची ताकद असते आणि पद्धतीची निवड तुम्हाला आवश्यक असलेल्या नियंत्रणाच्या स्तरावर आणि iframe च्या वर्तनावर अवलंबून असते. लोड इव्हेंट श्रोता सोपे आहे परंतु केवळ पूर्ण रीलोड शोधण्यासाठी कार्य करते. iframe मध्ये स्क्रिप्ट इंजेक्ट केल्याने त्याच्या क्रियाकलापामध्ये अधिक तपशीलवार अंतर्दृष्टी मिळते परंतु स्क्रिप्ट घालण्याची परवानगी देण्यासाठी iframe आवश्यक आहे. शेवटी, द पोस्ट मेसेज पद्धत क्रॉस-डोमेन संप्रेषण हाताळण्यासाठी एक मजबूत उपाय आहे आणि विशिष्ट iframe इव्हेंटबद्दल पालकांना सूचित करू शकते. या पद्धती PHP कोडमध्ये थेट प्रवेश न करता iframe स्थितीतील बदल हाताळण्यासाठी लवचिक मार्ग प्रदान करतात.

// 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>

१

// 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 बदल देखरेख करण्यासाठी प्रगत तंत्र

iframe मधील बदल शोधण्यासाठी आणखी एक मनोरंजक तंत्र वापरणे आहे उत्परिवर्तन निरीक्षक API हे API तुम्हाला DOM ट्रीमधील बदलांचे निरीक्षण करण्याची परवानगी देते, जसे की नवीन नोड्स जोडले जातात किंवा काढले जातात. PHP पृष्ठ रीलोड झाल्यावर हे आपल्याला थेट सूचित करणार नाही, तरीही ते iframe च्या सामग्रीमधील बदल शोधण्यात मदत करू शकते. उदाहरणार्थ, जर रीलोड केल्यानंतर iframe मधील काही घटक बदलले किंवा अपडेट केले गेले, तर उत्परिवर्तन निरीक्षक ते बदल पकडू शकतात आणि त्यानुसार स्पिनर ट्रिगर करू शकतात.

याव्यतिरिक्त, ब्राउझर इव्हेंटचा लाभ घेणे जसे अनलोड करण्यापूर्वी किंवा उतरवणे iframe रीलोड होणार आहे हे शोधण्यात मदत करू शकते. जेव्हा पृष्ठ अनलोड केले जाते किंवा वर्तमान पृष्ठापासून दूर नेव्हिगेशन सुरू केले जाते तेव्हा हे इव्हेंट सक्रिय होतात. iframe मधील या इव्हेंटमध्ये इव्हेंट श्रोते जोडून, ​​स्पिनर योग्य वेळी दर्शविले जाईल याची खात्री करून, रीलोड होणार आहे हे तुम्ही मूळ विंडोला सूचित करू शकता. ही पद्धत सर्वसमावेशक उपाय प्रदान करून इतर पद्धतींसह एकत्रित केल्यावर सर्वोत्तम कार्य करते.

शेवटी, तुम्ही बदल तपासण्यासाठी एक पद्धत म्हणून iframe पोलिंग वापरण्याचा विचार करू शकता. या पद्धतीत, पालक अँगुलर ॲप वेळोवेळी तपासते iframe सामग्री बदलली आहे किंवा रीलोड केली आहे हे निर्धारित करण्यासाठी iframe मधील URL किंवा इतर विशिष्ट घटक. हा दृष्टीकोन कमी कार्यक्षम असू शकतो, विशेषत: कार्यप्रदर्शनाच्या बाबतीत, इतर पद्धती व्यवहार्य नसताना हा एक फॉलबॅक पर्याय आहे. नकारात्मक बाजू म्हणजे मतदान सर्व पृष्ठातील बदल शोधू शकत नाही परंतु तरीही विशिष्ट परिस्थितींसाठी उपयुक्त ठरू शकते.