PHP lehe uuesti laadimise tuvastamine iframe'is nurga abil

Iframe'i uuesti laadimiste käsitlemine nurkrakendustes

Kaasaegses veebiarenduses on väliste rakenduste, näiteks PHP-lehe manustamine Angular projekti iframe'i kaudu levinud lähenemisviis. Siiski tekitab see väljakutseid, kui proovite jälgida sündmusi või lehtede uuesti laadimisi selles iframe'is, eriti kui teil pole juurdepääsu PHP projekti koodile.

Üks selline väljakutse tekib siis, kui teil on vaja iga kord, kui iframe'i sisu värskendatakse, kuvada oma Angular rakenduses laadimisspinner. Kuna te ei saa PHP-koodi muuta, muutub iframe'i sisu uuesti laadimiste või muudatuste tuvastamine keeruliseks. Võti on leida viis, kuidas JavaScripti poolelt iframe'i muudatusi jälgida.

Paljud arendajad mõtlevad, kas iframe'i on võimalik sisestada skript, mis kuulab sündmusi, nagu HTTP-päringud või uuesti laadimised, eriti kui iframe pärineb projektist, kus teil puudub otsene kontroll koodi üle. Seda saab potentsiaalselt teha JavaScripti kaudu teie Angular rakenduses.

Selles artiklis uurime võimalikke lahendusi, kuidas tuvastada, millal iframe'is olev PHP-leht uuesti laaditakse, ja kuidas saate sellistele muudatustele vastuseks laadimiskeerutajat rakendada. Kuigi teil pole juurdepääsu PHP-koodile endale, võib JavaScript pakkuda loomingulisi lahendusi.

Otsige lahendusi Iframe'i uuesti laadimise tuvastamiseks nurgas

Esimese skripti põhiidee on kuulata koormus iframe'i sündmus. Laadimissündmus käivitatakse iga kord, kui iframe'i sisu muutub või laaditakse uuesti. Seda sündmust kasutades saame tuvastada, millal iframe'is olevat PHP-lehte värskendatakse. Algselt näidatakse laadimisvurrut funktsiooni kutsudes showSpinner. Kui iframe'i sisu on täielikult laaditud, peidaSpinner funktsiooni kutsutakse ketruse peitmiseks. See meetod on üsna tõhus, kuna see ei nõua juurdepääsu PHP-koodile ja tugineb lihtsalt iframe'i olekule.

Teine lahendus kasutab täpsemat lähenemist, sisestades JavaScripti otse iframe'i. Avades iframe'i sisuaken, saame dünaamiliselt luua ja sisestada skriptielemendi iframe'i DOM-i. See skript jälgib kõiki HTTP-päringuid, mille on algatanud PHP leht iframe'is, kasutades mõlemat XMLHttpRequest ja Tõmba API. Eesmärk on jälgida võrgutegevust iframe'is ja kuvada laadimisspinner, kui selline tegevus toimub. See lähenemisviis pakub täpsemat juhtimist, jälgides täpset HTTP-päringute tegemise hetke.

Kolmas meetod võimendab postisõnum API, mis võimaldab suhelda iframe'i ja põhirakenduse Angular vahel. Sel juhul saadab iframe vanemale sõnumi, kui see laadimise lõpetab. Ülemaaken kuulab neid sõnumeid ja kuvab või peidab vastavalt spinneri. PostMessage'i kasutamise eeliseks on see, et see on turvaline viis akende vahel teabe vahetamiseks isegi siis, kui teil pole juurdepääsu iframe'i sisemisele koodile. See sobib ideaalselt erinevate päritoluga iframe'ide jaoks, kus ülem- ja iframe pärinevad erinevatest domeenidest.

Igal neist lahendustest on oma tugevad küljed ja meetodi valik sõltub vajalikust juhtimistasemest ja iframe'i käitumisest. Laadimissündmuste kuulaja on lihtne, kuid töötab ainult täielike uuesti laadimiste tuvastamiseks. Skripti sisestamine iframe'i annab selle tegevusest üksikasjalikuma ülevaate, kuid eeldab, et iframe võimaldab skripti sisestamist. Lõpuks, postisõnum meetod on tugev lahendus domeenidevahelise suhtluse haldamiseks ja võib teavitada vanemat konkreetsetest iframe'i sündmustest. Need meetodid pakuvad paindlikke viise iframe'i olekumuutuste käsitlemiseks, ilma et oleks vaja otsest juurdepääsu PHP-koodile.

// 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äiustatud tehnikad Iframe'i nurgamuutuste jälgimiseks

Veel üks huvitav tehnika iframe'i muudatuste tuvastamiseks on MutationObserver API. See API võimaldab jälgida muudatusi DOM-puus, näiteks uute sõlmede lisamist või eemaldamist. Kuigi see ei teavita teid PHP lehe uuesti laadimisest otse, võib see aidata tuvastada muudatusi iframe'i sisus. Näiteks kui teatud elemendid iframe'is asendatakse või värskendatakse pärast uuesti laadimist, siis MutationObserver saab neid muudatusi tabada ja vastavalt spinneri käivitada.

Lisaks võimendades brauseri sündmusi nagu enne mahalaadimist või maha laadida võib aidata tuvastada, millal iframe uuesti laaditakse. Need sündmused käivituvad lehe mahalaadimisel või aktiivselt lehelt lahkumise alustamisel. Lisades sündmustekuulajad nendele sündmustele iframe'i sees, saate ülemaknale teatada, et toimumas on uuesti laadimine, tagades, et spinner kuvatakse õigel ajal. See meetod töötab kõige paremini koos teiste lähenemisviisidega, pakkudes terviklikku lahendust.

Lõpuks võiksite kaaluda muudatuste kontrollimise meetodina iframe'i pollimist. Selle meetodi puhul kontrollib vanemrakendus Angular perioodiliselt iframe URL või muud konkreetsed elemendid iframe'is, et teha kindlaks, kas sisu on muutunud või uuesti laaditud. Kuigi see lähenemisviis võib olla vähem tõhus, eriti jõudluse osas, on see varuvalik, kui muud meetodid pole teostatavad. Negatiivne külg on see, et küsitlus ei pruugi tuvastada kõiki lehesiseseid muudatusi, kuid võib siiski olla kasulik konkreetsete stsenaariumide puhul.