Upptäcker PHP-sida omladdning i en iframe med Angular

Hantera omladdningar av Iframe i vinkelapplikationer

I modern webbutveckling är det vanligt att bädda in externa applikationer som en PHP-sida i ett Angular-projekt via en iframe. Det introducerar dock utmaningar när du försöker övervaka händelser eller sidladdningar inom den iframen, särskilt när du inte har tillgång till PHP-projektets kod.

En sådan utmaning uppstår när du behöver visa en laddningssnurra i din Angular-applikation närhelst iframe-innehållet uppdateras. Eftersom du inte kan ändra PHP-koden blir det svårt att upptäcka omladdningar eller ändringar av iframe-innehållet. Nyckeln är att hitta ett sätt att spåra ändringar i iframen från JavaScript-sidan.

Många utvecklare undrar om det är möjligt att injicera ett skript i iframen som lyssnar efter händelser som HTTP-förfrågningar eller omladdningar, speciellt om iframen kommer från ett projekt där du saknar direkt kontroll över koden. Detta kan eventuellt göras genom JavaScript i din Angular-applikation.

I den här artikeln kommer vi att utforska de möjliga lösningarna för att upptäcka när en PHP-sida inuti en iframe laddas om, och hur du kan implementera en laddningsspinnare som svar på sådana ändringar. Även om du inte har tillgång till själva PHP-koden kan JavaScript erbjuda kreativa lösningar.

Utforska lösningar för att upptäcka Iframe-återladdningar i Angular

I det första manuset är nyckelidén att lyssna efter ladda händelse av iframe. Inläsningshändelsen utlöses varje gång iframens innehåll ändras eller laddas om. Genom att använda denna händelse kan vi upptäcka när PHP-sidan inuti iframen uppdateras. Inledningsvis visas lastspinnaren genom att anropa funktionen showSpinner. När iframe-innehållet har laddats helt, dölj Spinner funktionen anropas för att dölja spinnern. Den här metoden är ganska effektiv eftersom den inte kräver åtkomst till PHP-koden, utan bara förlitar sig på iframens tillstånd.

Den andra lösningen tar ett mer avancerat tillvägagångssätt genom att injicera JavaScript direkt i iframen. Genom att komma åt iframe contentWindow, kan vi dynamiskt skapa och infoga ett skriptelement i iframens DOM. Det här skriptet spårar alla HTTP-förfrågningar som initieras av PHP-sidan inuti iframen, med hjälp av både XMLHttpRequest och den Hämta API. Målet här är att övervaka nätverksaktivitet inom iframen och visa laddningssnurran när någon sådan aktivitet inträffar. Detta tillvägagångssätt erbjuder mer detaljerad kontroll genom att spåra det exakta ögonblicket HTTP-förfrågningar görs.

Den tredje metoden utnyttjar postmeddelande API, som tillåter kommunikation mellan iframe och den överordnade Angular-applikationen. I det här fallet skickar iframen ett meddelande till föräldern när den är klar att laddas. Föräldrafönstret lyssnar efter dessa meddelanden och visar eller döljer spinnern i enlighet med detta. Fördelen med att använda postMessage är att det är ett säkert sätt att utbyta information mellan fönster, även när du inte har tillgång till iframens interna kod. Den är idealisk för iframes med flera ursprung där föräldern och iframen kommer från olika domäner.

Var och en av dessa lösningar har sina styrkor, och valet av metod beror på nivån av kontroll du behöver och iframens beteende. Ladda händelseavlyssnaren är enkel men fungerar bara för att detektera fulla omladdningar. Att injicera ett skript i iframen ger mer detaljerade insikter i dess aktivitet men kräver att iframen tillåter skriptinfogning. Slutligen, den postmeddelande metod är en robust lösning för att hantera kommunikation över flera domäner och kan meddela föräldern om specifika iframe-händelser. Dessa metoder ger flexibla sätt att hantera iframe-tillståndsändringar utan att kräva direkt åtkomst till PHP-koden.

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

Avancerade tekniker för övervakning av Iframe-ändringar i Angular

En annan intressant teknik för att upptäcka ändringar i en iframe är att använda MutationObserver API. Detta API låter dig övervaka ändringar i DOM-trädet, till exempel när nya noder läggs till eller tas bort. Även om detta inte meddelar dig direkt när PHP-sidan laddas om, kan det hjälpa till att upptäcka ändringar i iframens innehåll. Till exempel, om vissa element i iframen ersätts eller uppdateras efter en omladdning, MutationObserver kan fånga dessa förändringar och utlösa spinnern därefter.

Dessutom utnyttjar webbläsarhändelser som innan avlastning eller lossa kan hjälpa till att upptäcka när iframen är på väg att laddas om. Dessa händelser aktiveras när sidan laddas ur eller när en navigering bort från den aktuella sidan initieras. Genom att lägga till händelseavlyssnare till dessa händelser inuti iframen kan du meddela det överordnade fönstret att en omladdning är på väg att inträffa, vilket säkerställer att spinnern visas vid rätt tidpunkt. Denna metod fungerar bäst i kombination med andra metoder, vilket ger en heltäckande lösning.

Slutligen kan du överväga att använda iframe polling som en metod för att leta efter ändringar. I den här metoden kontrollerar den överordnade Angular-appen med jämna mellanrum iframe URL eller andra specifika element i iframen för att avgöra om innehållet har ändrats eller laddats om. Även om detta tillvägagångssätt kan vara mindre effektivt, särskilt när det gäller prestanda, är det ett reservalternativ när andra metoder inte är genomförbara. Nackdelen är att polling kanske inte upptäcker alla ändringar på sidan men ändå kan vara användbara för specifika scenarier.