PHP lapas atkārtotas ielādes noteikšana iframe, izmantojot Angular

Iframe atkārtotas ielādes apstrāde leņķiskās lietojumprogrammās

Mūsdienu tīmekļa izstrādē izplatīta pieeja ir ārējo lietojumprogrammu, piemēram, PHP lapas, iegulšana Angular projektā, izmantojot iframe. Tomēr tas rada problēmas, mēģinot pārraudzīt notikumus vai lapu atkārtotas ielādes šajā iframe ietvaros, it īpaši, ja jums nav piekļuves PHP projekta kodam.

Viens no šādiem izaicinājumiem rodas, ja lietojumprogrammā Angular ir jāparāda ielādes svira, kad tiek atsvaidzināts iframe saturs. Tā kā jūs nevarat modificēt PHP kodu, atkārtotas ielādes vai iframe satura izmaiņu noteikšana kļūst sarežģīta. Galvenais ir atrast veidu, kā izsekot iframe izmaiņām no JavaScript puses.

Daudzi izstrādātāji domā, vai ir iespējams ievadīt skriptu iframe, kas noklausās notikumus, piemēram, HTTP pieprasījumus vai atkārtotas ielādes, it īpaši, ja iframe ir iegūts no projekta, kurā jums nav tiešas kontroles pār kodu. To, iespējams, var izdarīt, izmantojot JavaScript jūsu Angular lietojumprogrammā.

Šajā rakstā mēs izpētīsim iespējamos risinājumus, kā noteikt, kad PHP lapa iFrame iekšienē tiek atkārtoti ielādēta, un kā jūs varat ieviest ielādes sviru, reaģējot uz šādām izmaiņām. Lai gan jums nav piekļuves pašam PHP kodam, JavaScript var piedāvāt radošus risinājumus.

Risinājumu izpēte Iframe atkārtotas ielādes noteikšanai leņķiskā režīmā

Pirmajā skriptā galvenā ideja ir klausīties slodze iframe notikums. Ielādes notikums tiek aktivizēts katru reizi, kad mainās iframe saturs vai tiek atkārtoti ielādēts. Izmantojot šo notikumu, mēs varam noteikt, kad PHP lapa iframe iekšpusē tiek atsvaidzināta. Sākotnēji ielādes vērpējs tiek parādīts, izsaucot funkciju parādīt Spinner. Kad iframe saturs ir pilnībā ielādēts, hideSpinner funkcija tiek izsaukta, lai paslēptu vērpēju. Šī metode ir diezgan efektīva, jo tai nav nepieciešama piekļuve PHP kodam, un tā vienkārši ir atkarīga no iframe stāvokļa.

Otrais risinājums izmanto progresīvāku pieeju, ievadot JavaScript tieši iframe. Piekļūstot iframe ContentWindow, mēs varam dinamiski izveidot un ievietot skripta elementu iframe DOM. Šis skripts izseko visus HTTP pieprasījumus, ko ierosinājusi PHP lapa iframe, izmantojot abus XMLHttpRequest un Ienest API. Mērķis ir pārraudzīt tīkla darbību iFrame ietvaros un parādīt ielādes sviru, kad notiek šāda darbība. Šī pieeja piedāvā detalizētāku kontroli, izsekojot precīzu HTTP pieprasījumu veikšanas brīdi.

Trešā metode piesaista postZiņojums API, kas nodrošina saziņu starp iframe un vecāku Angular lietojumprogrammu. Šādā gadījumā iframe nosūta ziņojumu vecākam ikreiz, kad tiek pabeigta ielāde. Vecāku logs noklausās šos ziņojumus un attiecīgi parāda vai paslēpj vērpēju. PostMessage izmantošanas priekšrocība ir tā, ka tas ir drošs veids, kā apmainīties ar informāciju starp logiem, pat ja jums nav piekļuves iframe iekšējam kodam. Tas ir ideāli piemērots vairāku izcelsmju iFrame, kur vecāks un iframe nāk no dažādiem domēniem.

Katram no šiem risinājumiem ir savas stiprās puses, un metodes izvēle ir atkarīga no jums nepieciešamā kontroles līmeņa un iframe darbības. Ielādes notikumu klausītājs ir vienkāršs, taču darbojas tikai, lai noteiktu pilnīgas atkārtotas ielādes. Skripta ievadīšana iframe ietvarā sniedz detalizētāku ieskatu tā darbībā, taču ir nepieciešams iframe, lai atļautu skripta ievietošanu. Visbeidzot, postZiņojums metode ir stabils risinājums starpdomēnu komunikācijas apstrādei, un tā var informēt vecāku par konkrētiem iframe notikumiem. Šīs metodes nodrošina elastīgus veidus, kā apstrādāt iframe stāvokļa izmaiņas, neprasot tiešu piekļuvi PHP kodam.

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

Uzlabotas metodes Iframe leņķa izmaiņu uzraudzībai

Vēl viens interesants paņēmiens iframe izmaiņu noteikšanai ir izmantot MutationObserver API. Šis API ļauj pārraudzīt izmaiņas DOM kokā, piemēram, kad tiek pievienoti vai noņemti jauni mezgli. Lai gan tas tieši nepaziņos par PHP lapas atkārtotu ielādi, tas var palīdzēt noteikt izmaiņas iframe saturā. Piemēram, ja daži elementi iframe tiek aizstāti vai atjaunināti pēc atkārtotas ielādes, MutationObserver var uztvert šīs izmaiņas un attiecīgi aktivizēt vērpšanas ierīci.

Turklāt, izmantojot pārlūkprogrammas notikumus, piemēram, pirms izkraušanas vai izkraut var palīdzēt noteikt, kad iframe tiks atkārtoti ielādēts. Šie notikumi tiek aktivizēti, kad lapa tiek izlādēta vai tiek uzsākta navigācija prom no pašreizējās lapas. Pievienojot notikumu uztvērējus šiem notikumiem iframe iekšpusē, varat paziņot vecāklogam, ka drīzumā notiks atkārtota ielāde, nodrošinot, ka vērpējs tiek parādīts īstajā laikā. Šī metode vislabāk darbojas, ja to apvieno ar citām pieejām, nodrošinot visaptverošu risinājumu.

Visbeidzot, varat apsvērt iespēju izmantot iframe aptauju kā metodi izmaiņu pārbaudei. Izmantojot šo metodi, vecākprogramma Angular periodiski pārbauda iframe URL vai citi īpaši elementi iframe, lai noteiktu, vai saturs ir mainījies vai atkārtoti ielādēts. Lai gan šī pieeja var būt mazāk efektīva, jo īpaši veiktspējas ziņā, tā ir atkāpšanās iespēja, ja citas metodes nav iespējamas. Negatīvā puse ir tāda, ka aptauja var neatklāt visas lapā veiktās izmaiņas, taču tā joprojām var būt noderīga konkrētos scenārijos.