ആംഗുലർ ഉപയോഗിച്ച് ഒരു ഐഫ്രെയിമിൽ PHP പേജ് റീലോഡ് ചെയ്യുന്നത് കണ്ടെത്തുന്നു

കോണീയ ആപ്ലിക്കേഷനുകളിൽ Iframe റീലോഡുകൾ കൈകാര്യം ചെയ്യുന്നു

ആധുനിക വെബ് വികസനത്തിൽ, ഒരു കോണീയ പ്രോജക്റ്റിനുള്ളിൽ ഒരു PHP പേജ് പോലെയുള്ള ബാഹ്യ ആപ്ലിക്കേഷനുകൾ ഒരു iframe വഴി ഉൾച്ചേർക്കുന്നത് ഒരു സാധാരണ സമീപനമാണ്. എന്നിരുന്നാലും, ആ iframe-ൽ ഇവൻ്റുകൾ അല്ലെങ്കിൽ പേജ് റീലോഡുകൾ നിരീക്ഷിക്കാൻ ശ്രമിക്കുമ്പോൾ അത് വെല്ലുവിളികൾ അവതരിപ്പിക്കുന്നു, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് PHP പ്രോജക്റ്റിൻ്റെ കോഡിലേക്ക് ആക്സസ് ഇല്ലെങ്കിൽ.

iframe ഉള്ളടക്കം പുതുക്കിയെടുക്കുമ്പോഴെല്ലാം നിങ്ങളുടെ ആംഗുലർ ആപ്ലിക്കേഷനിൽ ഒരു ലോഡിംഗ് സ്പിന്നർ പ്രദർശിപ്പിക്കേണ്ടിവരുമ്പോൾ അത്തരം ഒരു വെല്ലുവിളി ഉയർന്നുവരുന്നു. നിങ്ങൾക്ക് PHP കോഡ് പരിഷ്‌ക്കരിക്കാൻ കഴിയാത്തതിനാൽ, റീലോഡുകളോ iframe ഉള്ളടക്കത്തിലെ മാറ്റങ്ങളോ കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടാണ്. JavaScript വശത്ത് നിന്ന് iframe-ലെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യുന്നതിനുള്ള ഒരു മാർഗം കണ്ടെത്തുകയാണ് പ്രധാനം.

HTTP അഭ്യർത്ഥനകളോ റീലോഡുകളോ പോലുള്ള ഇവൻ്റുകൾ ശ്രദ്ധിക്കുന്ന ഒരു സ്‌ക്രിപ്റ്റ് iframe-ലേക്ക് കുത്തിവയ്ക്കാൻ കഴിയുമോ എന്ന് പല ഡവലപ്പർമാരും ആശ്ചര്യപ്പെടുന്നു, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് കോഡിന്മേൽ നേരിട്ടുള്ള നിയന്ത്രണം ഇല്ലാത്ത ഒരു പ്രോജക്റ്റിൽ നിന്നാണ് iframe ഉറവിടം എങ്കിൽ. നിങ്ങളുടെ ആംഗുലർ ആപ്ലിക്കേഷനിൽ ജാവാസ്ക്രിപ്റ്റ് വഴി ഇത് ചെയ്യാൻ സാധ്യതയുണ്ട്.

ഈ ലേഖനത്തിൽ, ഒരു iframe-നുള്ളിലെ ഒരു PHP പേജ് വീണ്ടും ലോഡുചെയ്യുന്നത് കണ്ടെത്തുന്നതിനുള്ള സാധ്യമായ പരിഹാരങ്ങൾ ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, കൂടാതെ അത്തരം മാറ്റങ്ങൾക്ക് പ്രതികരണമായി നിങ്ങൾക്ക് എങ്ങനെ ഒരു ലോഡിംഗ് സ്പിന്നർ നടപ്പിലാക്കാം. നിങ്ങൾക്ക് PHP കോഡിലേക്ക് തന്നെ ആക്‌സസ് ഇല്ലെങ്കിലും, JavaScript-ന് ക്രിയാത്മകമായ പരിഹാരങ്ങൾ നൽകാൻ കഴിയും.

കോണിൽ ഐഫ്രെയിം റീലോഡുകൾ കണ്ടെത്തുന്നതിനുള്ള പരിഹാരങ്ങൾ പര്യവേക്ഷണം ചെയ്യുന്നു

ആദ്യ സ്ക്രിപ്റ്റിൽ, പ്രധാന ആശയം കേൾക്കുക എന്നതാണ് ലോഡ് iframe-ൻ്റെ ഇവൻ്റ്. iframe-ൻ്റെ ഉള്ളടക്കം മാറുമ്പോഴോ വീണ്ടും ലോഡുചെയ്യുമ്പോഴോ ഓരോ തവണയും ലോഡ് ഇവൻ്റ് ട്രിഗർ ചെയ്യപ്പെടുന്നു. ഈ ഇവൻ്റ് ഉപയോഗിക്കുന്നതിലൂടെ, iframe-നുള്ളിലെ PHP പേജ് പുതുക്കിയെടുക്കുമ്പോൾ നമുക്ക് കണ്ടെത്താനാകും. തുടക്കത്തിൽ, ഫംഗ്ഷൻ വിളിക്കുന്നതിലൂടെ ലോഡിംഗ് സ്പിന്നർ കാണിക്കുന്നു ഷോ സ്പിന്നർ. iframe ഉള്ളടക്കം പൂർണ്ണമായി ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, the hideSpinner സ്പിന്നറെ മറയ്ക്കാൻ ഫംഗ്ഷൻ വിളിക്കുന്നു. ഈ രീതി വളരെ കാര്യക്ഷമമാണ്, കാരണം ഇതിന് PHP കോഡിലേക്ക് ആക്‌സസ് ആവശ്യമില്ല, കൂടാതെ iframe-ൻ്റെ അവസ്ഥയെ ആശ്രയിക്കുന്നു.

രണ്ടാമത്തെ പരിഹാരം iframe-ലേക്ക് നേരിട്ട് JavaScript കുത്തിവച്ചുകൊണ്ട് കൂടുതൽ വിപുലമായ സമീപനം സ്വീകരിക്കുന്നു. iframe's ആക്‌സസ് ചെയ്യുന്നതിലൂടെ ഉള്ളടക്ക വിൻഡോ, iframe-ൻ്റെ DOM-ൽ നമുക്ക് ചലനാത്മകമായി ഒരു സ്‌ക്രിപ്റ്റ് ഘടകം സൃഷ്‌ടിക്കാനും ചേർക്കാനും കഴിയും. ഈ സ്‌ക്രിപ്‌റ്റ് ഐഫ്രെയിമിനുള്ളിലെ PHP പേജ് ആരംഭിച്ച എല്ലാ HTTP അഭ്യർത്ഥനകളും ട്രാക്ക് ചെയ്യുന്നു. XMLHttpRequest കൂടാതെ API ലഭ്യമാക്കുക. iframe-നുള്ളിലെ നെറ്റ്‌വർക്ക് പ്രവർത്തനം നിരീക്ഷിക്കുകയും അത്തരം പ്രവർത്തനം നടക്കുമ്പോൾ ലോഡിംഗ് സ്പിന്നർ പ്രദർശിപ്പിക്കുകയും ചെയ്യുക എന്നതാണ് ഇവിടെ ലക്ഷ്യം. HTTP അഭ്യർത്ഥനകൾ നടത്തിയ കൃത്യമായ നിമിഷം ട്രാക്ക് ചെയ്യുന്നതിലൂടെ ഈ സമീപനം കൂടുതൽ ഗ്രാനുലാർ നിയന്ത്രണം വാഗ്ദാനം ചെയ്യുന്നു.

മൂന്നാമത്തെ രീതി പ്രയോജനപ്പെടുത്തുന്നു പോസ്റ്റ് സന്ദേശം ഐഫ്രെയിമും പാരൻ്റ് ആംഗുലർ ആപ്ലിക്കേഷനും തമ്മിലുള്ള ആശയവിനിമയം അനുവദിക്കുന്ന API. ഈ സാഹചര്യത്തിൽ, ലോഡിംഗ് പൂർത്തിയാകുമ്പോഴെല്ലാം iframe രക്ഷിതാവിന് ഒരു സന്ദേശം അയയ്ക്കുന്നു. പാരൻ്റ് വിൻഡോ ഈ സന്ദേശങ്ങൾ ശ്രദ്ധിക്കുകയും അതിനനുസരിച്ച് സ്പിന്നറെ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നു. postMessage ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനം, iframe-ൻ്റെ ആന്തരിക കോഡിലേക്ക് നിങ്ങൾക്ക് ആക്‌സസ് ഇല്ലെങ്കിൽ പോലും, വിൻഡോകൾക്കിടയിൽ വിവരങ്ങൾ കൈമാറുന്നതിനുള്ള ഒരു സുരക്ഷിത മാർഗമാണിത്. രക്ഷിതാവും 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>

// 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-ലെ മാറ്റങ്ങൾ കണ്ടെത്തുന്നതിനുള്ള മറ്റൊരു രസകരമായ സാങ്കേതികതയാണ് ഉപയോഗിക്കുന്നത് മ്യൂട്ടേഷൻ ഒബ്സർവർ API. പുതിയ നോഡുകൾ ചേർക്കുമ്പോഴോ നീക്കം ചെയ്യുമ്പോഴോ പോലുള്ള DOM ട്രീയിലെ മാറ്റങ്ങൾ നിരീക്ഷിക്കാൻ ഈ API നിങ്ങളെ അനുവദിക്കുന്നു. PHP പേജ് റീലോഡ് ചെയ്യുമ്പോൾ ഇത് നിങ്ങളെ നേരിട്ട് അറിയിക്കില്ലെങ്കിലും, iframe-ൻ്റെ ഉള്ളടക്കത്തിലെ മാറ്റങ്ങൾ കണ്ടെത്താൻ ഇത് സഹായിക്കും. ഉദാഹരണത്തിന്, ഒരു റീലോഡിന് ശേഷം iframe-ലെ ചില ഘടകങ്ങൾ മാറ്റിസ്ഥാപിക്കുകയോ അപ്ഡേറ്റ് ചെയ്യുകയോ ചെയ്താൽ, the മ്യൂട്ടേഷൻ ഒബ്സർവർ ആ മാറ്റങ്ങൾ പിടിച്ചെടുക്കാനും അതിനനുസരിച്ച് സ്പിന്നറെ ട്രിഗർ ചെയ്യാനും കഴിയും.

കൂടാതെ, പോലുള്ള ബ്രൗസർ ഇവൻ്റുകൾ പ്രയോജനപ്പെടുത്തുന്നു ഇറക്കുന്നതിന് മുമ്പ് അല്ലെങ്കിൽ ഇറക്കുക iframe എപ്പോൾ റീലോഡ് ചെയ്യാൻ പോകുന്നുവെന്ന് കണ്ടെത്താൻ സഹായിക്കും. പേജ് അൺലോഡ് ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ നിലവിലെ പേജിൽ നിന്ന് ഒരു നാവിഗേഷൻ ആരംഭിക്കുമ്പോൾ ഈ ഇവൻ്റുകൾ ഫയർ ചെയ്യുന്നു. iframe-നുള്ളിൽ ഈ ഇവൻ്റുകളിലേക്ക് ഇവൻ്റ് ശ്രോതാക്കളെ ചേർക്കുന്നതിലൂടെ, ഒരു റീലോഡ് സംഭവിക്കാൻ പോകുകയാണെന്ന് നിങ്ങൾക്ക് പാരൻ്റ് വിൻഡോയെ അറിയിക്കാനാകും, സ്പിന്നർ ശരിയായ സമയത്ത് കാണിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. മറ്റ് സമീപനങ്ങളുമായി സംയോജിപ്പിക്കുമ്പോൾ ഈ രീതി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, ഇത് ഒരു സമഗ്രമായ പരിഹാരം നൽകുന്നു.

അവസാനമായി, മാറ്റങ്ങൾ പരിശോധിക്കുന്നതിനുള്ള ഒരു രീതിയായി iframe പോളിംഗ് ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് പരിഗണിക്കാവുന്നതാണ്. ഈ രീതിയിൽ, പാരൻ്റ് ആംഗുലാർ ആപ്പ് ഇടയ്ക്കിടെ പരിശോധിക്കുന്നു iframe ഉള്ളടക്കം മാറിയിട്ടുണ്ടോ അല്ലെങ്കിൽ വീണ്ടും ലോഡുചെയ്‌തിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ URL അല്ലെങ്കിൽ iframe-ലെ മറ്റ് നിർദ്ദിഷ്ട ഘടകങ്ങൾ. ഈ സമീപനത്തിന് കാര്യക്ഷമത കുറവായിരിക്കാമെങ്കിലും, പ്രത്യേകിച്ച് പ്രകടനത്തിൻ്റെ കാര്യത്തിൽ, മറ്റ് രീതികൾ പ്രായോഗികമല്ലാത്തപ്പോൾ ഇത് ഒരു ഫാൾബാക്ക് ഓപ്ഷനാണ്. പോൾ ചെയ്യുന്നത് പേജിലെ എല്ലാ മാറ്റങ്ങളും കണ്ടെത്താനായേക്കില്ല, എന്നാൽ നിർദ്ദിഷ്ട സാഹചര്യങ്ങൾക്ക് അത് ഉപയോഗപ്രദമാകും.