PHP puslapio perkrovimo aptikimas iframe naudojant Angular

„Iframe“ perkrovimų valdymas kampinėse programose

Šiuolaikinio žiniatinklio kūrimo procese įprastas būdas įterpti išorines programas, pvz., PHP puslapį į Angular projektą per iframe. Tačiau tai kelia iššūkių bandant stebėti įvykius ar puslapio įkėlimus iš naujo tame iframe, ypač kai neturite prieigos prie PHP projekto kodo.

Vienas iš tokių iššūkių iškyla, kai reikia rodyti įkėlimo suktuką Angular programoje, kai atnaujinamas iframe turinys. Kadangi negalite modifikuoti PHP kodo, aptikti iš naujo įkėlimus arba „iframe“ turinio pakeitimus tampa sudėtinga. Svarbiausia yra rasti būdą, kaip stebėti „iframe“ pakeitimus iš „JavaScript“ pusės.

Daugeliui kūrėjų kyla klausimas, ar į iframe galima įterpti scenarijų, kuris išklauso įvykius, pvz., HTTP užklausas arba pakartotinius įkėlimus, ypač jei iframe gaunamas iš projekto, kuriame jūs neturite tiesioginės kodo kontrolės. Tai galima padaryti naudojant „JavaScript“ jūsų „Angular“ programoje.

Šiame straipsnyje išnagrinėsime galimus sprendimus, kaip aptikti, kada PHP puslapis įkeliamas iframe viduje, ir kaip galite įdiegti įkėlimo suktuką reaguojant į tokius pakeitimus. Nors jūs neturite prieigos prie paties PHP kodo, „JavaScript“ gali pasiūlyti kūrybingus sprendimus.

Ieškome sprendimų, kaip aptikti Iframe perkrovimus kampu

Pirmajame scenarijuje pagrindinė mintis yra klausytis apkrova iframe įvykis. Įkėlimo įvykis suaktyvinamas kiekvieną kartą, kai pasikeičia arba įkeliamas iš naujo „iframe“ turinys. Naudodami šį įvykį galime aptikti, kada atnaujinamas PHP puslapis iframe viduje. Iš pradžių pakrovimo suktukas rodomas iškvietus funkciją šouSpinner. Kai visiškai įkeliamas iframe turinys, HideSpinner funkcija iškviečiama paslėpti suktuką. Šis metodas yra gana efektyvus, nes jam nereikia prieigos prie PHP kodo ir jis tiesiog priklauso nuo iframe būsenos.

Antrasis sprendimas yra pažangesnis, įterpiant JavaScript tiesiai į iframe. Pasiekus iframe turinio langas, galime dinamiškai sukurti ir įterpti scenarijaus elementą į iframe DOM. Šis scenarijus stebi visas HTTP užklausas, kurias inicijuoja PHP puslapis iframe viduje, naudodamas abu XMLHttpRequest ir Gauti API. Tikslas yra stebėti tinklo veiklą „iframe“ rėmelyje ir rodyti įkėlimo suktuką, kai įvyksta tokia veikla. Šis metodas siūlo išsamesnį valdymą, nes tiksliai stebi HTTP užklausų pateikimo momentą.

Trečiasis metodas išnaudoja postMessage API, kuri leidžia palaikyti ryšį tarp iframe ir pagrindinės Angular programos. Tokiu atveju „iframe“ siunčia pranešimą pirminiam asmeniui, kai tik baigia įkelti. Pagrindinis langas išklauso šiuos pranešimus ir atitinkamai rodo arba paslepia suktuką. PostMessage naudojimo pranašumas yra tas, kad tai saugus būdas keistis informacija tarp langų, net kai neturite prieigos prie vidinio iframe kodo. Tai idealiai tinka įvairios kilmės iframe, kai pirminis ir iframe yra iš skirtingų domenų.

Kiekvienas iš šių sprendimų turi savo stipriąsias puses, o metodo pasirinkimas priklauso nuo jums reikalingo valdymo lygio ir „iframe“ elgesio. Įkėlimo įvykių klausytojas yra paprastas, bet veikia tik norint aptikti visus pakartotinius įkėlimus. Įterpus scenarijų į „iframe“, galima gauti išsamesnių įžvalgų apie jo veiklą, tačiau norint, kad būtų galima įterpti scenarijų, „iframe“ reikia. Galiausiai, postMessage metodas yra patikimas sprendimas tvarkyti tarpdomeninį ryšį ir gali pranešti pagrindiniam asmeniui apie konkrečius iframe įvykius. Šie metodai suteikia lanksčius būdus tvarkyti „iframe“ būsenos pokyčius, nereikalaujant tiesioginės prieigos prie PHP kodo.

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

Pažangūs „Iframe“ kampinių pokyčių stebėjimo metodai

Kitas įdomus būdas aptikti pokyčius iframe yra naudoti MutationObserver API. Ši API leidžia stebėti DOM medžio pakeitimus, pvz., kai pridedami arba pašalinami nauji mazgai. Nors tai tiesiogiai nepraneš, kai PHP puslapis bus įkeltas iš naujo, tai gali padėti aptikti iframe turinio pokyčius. Pavyzdžiui, jei tam tikri iframe elementai pakeičiami arba atnaujinami po įkėlimo iš naujo, MutationObserver gali užfiksuoti tuos pokyčius ir atitinkamai suaktyvinti suktuką.

Be to, naudojant naršyklės įvykius, pvz prieš iškraunant arba iškrauti gali padėti nustatyti, kada „iframe“ bus įkeltas iš naujo. Šie įvykiai suaktyvinami, kai puslapis iškraunamas arba kai pradedamas naršymas iš dabartinio puslapio. Pridėję įvykių klausytojus prie šių įvykių iframe viduje, galite pranešti pagrindiniam langui, kad netrukus bus įkeltas iš naujo, užtikrinant, kad suktukas būtų rodomas tinkamu laiku. Šis metodas geriausiai veikia, kai jis derinamas su kitais metodais ir suteikia visapusišką sprendimą.

Galiausiai galite apsvarstyti galimybę naudoti „iframe“ apklausą kaip metodą pakeitimams patikrinti. Taikant šį metodą, pagrindinė Angular programa periodiškai tikrina iframe URL arba kiti konkretūs iframe elementai, siekiant nustatyti, ar turinys pasikeitė ar įkeltas iš naujo. Nors šis metodas gali būti mažiau efektyvus, ypač našumo požiūriu, tai yra atsarginė parinktis, kai kiti metodai neįmanomi. Neigiama yra tai, kad apklausa gali neaptikti visų puslapio pakeitimų, bet vis tiek gali būti naudinga tam tikruose scenarijuose.