Detecció de la recàrrega de pàgines PHP en un Iframe mitjançant Angular

Gestió de recàrregues d'Iframe en aplicacions angulars

En el desenvolupament web modern, incrustar aplicacions externes com una pàgina PHP dins d'un projecte Angular mitjançant un iframe és un enfocament comú. Tanmateix, introdueix reptes quan s'intenta controlar esdeveniments o recàrregues de pàgines dins d'aquest iframe, especialment quan no teniu accés al codi del projecte PHP.

Un d'aquests reptes sorgeix quan necessiteu mostrar un gir de càrrega a la vostra aplicació Angular sempre que s'actualitza el contingut iframe. Com que no podeu modificar el codi PHP, detectar recàrregues o canvis al contingut de l'iframe es fa complicat. La clau és trobar una manera de fer un seguiment dels canvis a l'iframe des del costat de JavaScript.

Molts desenvolupadors es pregunten si és possible injectar un script a l'iframe que escolti esdeveniments com ara sol·licituds HTTP o recàrregues, especialment si l'iframe prové d'un projecte on no teniu control directe sobre el codi. Això es pot fer potencialment mitjançant JavaScript a la vostra aplicació Angular.

En aquest article, explorarem les possibles solucions per detectar quan es torna a carregar una pàgina PHP dins d'un iframe i com podeu implementar un spinner de càrrega en resposta a aquests canvis. Tot i que no teniu accés al codi PHP en si, JavaScript pot oferir solucions creatives.

Explorant solucions per detectar recàrregues d'Iframe a Angular

En el primer guió, la idea clau és escoltar càrrega esdeveniment de l'iframe. L'esdeveniment de càrrega s'activa cada vegada que el contingut de l'iframe canvia o es torna a carregar. Mitjançant aquest esdeveniment, podem detectar quan s'actualitza la pàgina PHP dins de l'iframe. Inicialment, el filador de càrrega es mostra cridant la funció showSpinner. Un cop el contingut de l'iframe es carregui completament, el hideSpinner es crida a la funció per ocultar el filador. Aquest mètode és bastant eficient, ja que no requereix accés al codi PHP i simplement es basa en l'estat de l'iframe.

La segona solució adopta un enfocament més avançat injectant JavaScript directament a l'iframe. Accedint a l'iframe finestra de contingut, podem crear i inserir de forma dinàmica un element d'script al DOM de l'iframe. Aquest script fa un seguiment de les sol·licituds HTTP iniciades per la pàgina PHP dins de l'iframe, utilitzant tant el XMLHttpRequest i el Fetch API. L'objectiu aquí és supervisar l'activitat de la xarxa dins de l'iframe i mostrar el filador de càrrega quan es produeix una activitat d'aquest tipus. Aquest enfocament ofereix un control més granular mitjançant el seguiment del moment exacte en què es fan les sol·licituds HTTP.

El tercer mètode aprofita el postMissatge API, que permet la comunicació entre l'iframe i l'aplicació Angular pare. En aquest cas, l'iframe envia un missatge al pare sempre que s'acaba de carregar. La finestra principal escolta aquests missatges i mostra o amaga el filador en conseqüència. L'avantatge d'utilitzar postMessage és que és una manera segura d'intercanviar informació entre finestres, fins i tot quan no teniu accés al codi intern de l'iframe. És ideal per a iframes d'origen creuat on el pare i l'iframe provenen de diferents dominis.

Cadascuna d'aquestes solucions té els seus punts forts i l'elecció del mètode depèn del nivell de control que necessiteu i del comportament de l'iframe. L'escolta d'esdeveniments de càrrega és senzill, però només funciona per detectar recàrregues completes. Injectar un script a l'iframe proporciona informació més detallada sobre la seva activitat, però requereix que l'iframe permeti la inserció de l'script. Finalment, el postMissatge El mètode és una solució sòlida per gestionar la comunicació entre dominis i pot notificar als pares sobre esdeveniments iframe específics. Aquests mètodes ofereixen maneres flexibles de gestionar els canvis d'estat de l'iframe sense requerir accés directe al codi 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);

Tècniques avançades per al seguiment dels canvis d'iframe en angular

Una altra tècnica interessant per detectar canvis en un iframe és utilitzar el MutationObserver API. Aquesta API us permet supervisar els canvis a l'arbre DOM, com ara quan s'afegeixen o s'eliminen nous nodes. Tot i que això no us notificarà directament quan es torni a carregar la pàgina PHP, pot ajudar a detectar canvis en el contingut de l'iframe. Per exemple, si determinats elements de l'iframe es substitueixen o s'actualitzen després d'una recàrrega, el MutationObserver pot captar aquests canvis i activar el filador en conseqüència.

A més, aprofitant esdeveniments del navegador com abans de descarregar o descarregar pot ajudar a detectar quan l'iframe està a punt de tornar-se a carregar. Aquests esdeveniments es desencadenen quan s'està descarregant la pàgina o quan s'inicia una navegació lluny de la pàgina actual. En afegir oients d'esdeveniments a aquests esdeveniments dins de l'iframe, podeu notificar a la finestra principal que està a punt de produir-se una recàrrega, assegurant-vos que el filador es mostri en el moment adequat. Aquest mètode funciona millor quan es combina amb altres enfocaments, proporcionant una solució integral.

Finalment, podeu considerar l'ús de l'enquesta iframe com a mètode per comprovar si hi ha canvis. En aquest mètode, l'aplicació principal Angular comprova periòdicament iframe URL o altres elements específics dins de l'iframe per determinar si el contingut ha canviat o s'ha tornat a carregar. Tot i que aquest enfocament pot ser menys eficient, especialment pel que fa al rendiment, és una opció alternativa quan altres mètodes no són factibles. L'inconvenient és que les enquestes poden no detectar tots els canvis a la pàgina, però encara poden ser útils per a escenaris específics.