PHP oldal újratöltés észlelése iframe-ben Angular használatával

Iframe újratöltések kezelése szögletes alkalmazásokban

A modern webfejlesztésben elterjedt megközelítés a külső alkalmazások, például egy PHP-oldal beágyazása egy Angular projektbe iframe-en keresztül. Azonban kihívásokat vet fel, amikor az adott iframe-en belüli eseményeket vagy oldalújratöltéseket próbálják figyelni, különösen akkor, ha nem fér hozzá a PHP-projekt kódjához.

Az egyik ilyen kihívás akkor merül fel, amikor az iframe-tartalom frissítésekor betöltőpörgőt kell megjelenítenie az Angular alkalmazásban. Mivel a PHP kód nem módosítható, az újratöltések vagy az iframe tartalom változásainak észlelése bonyolulttá válik. A kulcs az, hogy megtaláljuk a módját az iframe változásainak követésére a JavaScript oldalról.

Sok fejlesztő azon tűnődik, hogy lehetséges-e olyan szkriptet beilleszteni az iframe-be, amely figyeli az eseményeket, például a HTTP-kéréseket vagy az újratöltéseket, különösen akkor, ha az iframe olyan projektből származik, ahol nincs közvetlen ellenőrzés a kód felett. Ez potenciálisan megtehető a JavaScript segítségével az Angular alkalmazásban.

Ebben a cikkben megvizsgáljuk a lehetséges megoldásokat annak észlelésére, hogy egy iframe-en belüli PHP-oldal újratöltődjön, és hogyan lehet betöltési pörgetőt megvalósítani az ilyen változásokra válaszul. Bár magának a PHP-kódhoz nincs hozzáférése, a JavaScript kreatív megoldásokat kínálhat.

Megoldások felfedezése az iframe újratöltéseinek észlelésére szögben

Az első szkriptben a kulcsötlet az, hogy figyeljünk a terhelés az iframe eseménye. A betöltési esemény minden alkalommal aktiválódik, amikor az iframe tartalma megváltozik vagy újra betöltődik. Ennek az eseménynek a használatával észlelhetjük, hogy az iframe-en belüli PHP oldal mikor frissül. Kezdetben a betöltő spinner jelenik meg a függvény meghívásával showSpinner. Miután az iframe tartalom teljesen betöltődik, a hideSpinner funkciót hívják meg a fonó elrejtésére. Ez a módszer meglehetősen hatékony, mivel nem igényel hozzáférést a PHP-kódhoz, és egyszerűen az iframe állapotára támaszkodik.

A második megoldás egy fejlettebb megközelítést alkalmaz: közvetlenül az iframe-be fecskendezi be a JavaScriptet. Az iframe-hez való hozzáféréssel contentWindow, dinamikusan létrehozhatunk és beilleszthetünk egy szkriptelemet az iframe DOM-jába. Ez a szkript nyomon követi az iframe-en belüli PHP oldal által kezdeményezett HTTP-kéréseket, mindkettőt a XMLHttpRequest és a API lekérése. A cél itt az iframe-en belüli hálózati tevékenység figyelése, és a betöltési pörgető megjelenítése, ha ilyen tevékenység történik. Ez a megközelítés részletesebb vezérlést kínál azáltal, hogy nyomon követi a HTTP-kérések pontos pillanatát.

A harmadik módszer kihasználja a postMessage API, amely lehetővé teszi a kommunikációt az iframe és a szülő Angular alkalmazás között. Ebben az esetben az iframe üzenetet küld a szülőnek, amikor befejeződik a betöltés. A szülőablak figyeli ezeket az üzeneteket, és ennek megfelelően megjeleníti vagy elrejti a pörgetőt. A postMessage használatának az az előnye, hogy biztonságos módja az információcserének az ablakok között, még akkor is, ha nem fér hozzá az iframe belső kódjához. Ideális a több eredetű iframe-ekhez, ahol a szülő és az iframe különböző tartományokból származik.

Mindegyik megoldásnak megvannak a maga erősségei, és a módszer kiválasztása a szükséges vezérlési szinttől és az iframe viselkedésétől függ. A betöltési eseményfigyelő egyszerű, de csak a teljes újratöltések észlelésére használható. Egy szkript beillesztése az iframe-be részletesebb betekintést nyújt a tevékenységébe, de megköveteli, hogy az iframe lehetővé tegye a szkript beszúrását. Végül a postMessage A metódus robusztus megoldás a tartományok közötti kommunikáció kezelésére, és értesítheti a szülőt az adott iframe eseményekről. Ezek a módszerek rugalmas módokat kínálnak az iframe állapotváltozások kezelésére anélkül, hogy közvetlenül hozzá kellene férniük a PHP-kódhoz.

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

Speciális technikák az iframe változásainak nyomon követésére a szögben

Egy másik érdekes technika az iframe változásainak észlelésére a MutationObserver API. Ez az API lehetővé teszi a DOM-fában bekövetkezett változások figyelését, például új csomópontok hozzáadását vagy eltávolítását. Ez ugyan nem értesít közvetlenül a PHP-oldal újratöltéséről, de segíthet észlelni az iframe tartalmában bekövetkezett változásokat. Például, ha az iframe bizonyos elemeit újratöltés után lecserélik vagy frissítik, a MutationObserver képes felfogni ezeket a változásokat, és ennek megfelelően elindítani a forgót.

Ezen túlmenően a böngésző eseményeinek kihasználása, mint pl kirakás előtt vagy kirak segíthet észlelni, ha az iframe újratöltés előtt áll. Ezek az események akkor aktiválódnak, amikor az oldalt ki kell tölteni, vagy amikor elindul az aktuális oldalról való elnavigáció. Ha eseményfigyelőket ad hozzá ezekhez az eseményekhez az iframe-en belül, értesítheti a szülőablakot, hogy újratöltés közeleg, így biztosíthatja, hogy a pörgető a megfelelő időben jelenjen meg. Ez a módszer akkor működik a legjobban, ha más megközelítésekkel kombinálják, és átfogó megoldást nyújtanak.

Végül fontolóra veheti az iframe lekérdezést a változások ellenőrzésére. Ennél a módszernél a szülő Angular alkalmazás rendszeresen ellenőrzi a iframe URL vagy más konkrét elemek az iframe-en belül annak megállapítására, hogy a tartalom megváltozott vagy újratöltött-e. Bár ez a megközelítés kevésbé hatékony, különösen a teljesítmény szempontjából, ez egy tartalék lehetőség, ha más módszerek nem kivitelezhetők. Hátránya, hogy a lekérdezés nem feltétlenül észlel minden oldalon belüli változást, de bizonyos forgatókönyvek esetén hasznos lehet.