Wykrywanie ponownego ładowania strony PHP w ramce iframe przy użyciu Angular

Obsługa ponownego ładowania ramek iframe w aplikacjach Angular

We współczesnym tworzeniu stron internetowych powszechnym podejściem jest osadzanie aplikacji zewnętrznych, takich jak strona PHP, w projekcie Angular za pośrednictwem ramki iframe. Wprowadza jednak wyzwania podczas próby monitorowania zdarzeń lub przeładowań stron w tej ramce iframe, szczególnie gdy nie masz dostępu do kodu projektu PHP.

Jedno z takich wyzwań pojawia się, gdy musisz wyświetlić pokrętło ładowania w aplikacji Angular za każdym razem, gdy zawartość iframe jest odświeżana. Ponieważ nie można modyfikować kodu PHP, wykrywanie przeładowań lub zmian w zawartości elementu iframe staje się trudne. Kluczem jest znalezienie sposobu na śledzenie zmian w ramce iframe od strony JavaScript.

Wielu programistów zastanawia się, czy możliwe jest wstrzyknięcie skryptu do elementu iframe, który nasłuchuje zdarzeń, takich jak żądania HTTP lub przeładowania, zwłaszcza jeśli element iframe pochodzi z projektu, w którym nie ma bezpośredniej kontroli nad kodem. Można to potencjalnie zrobić za pomocą JavaScript w aplikacji Angular.

W tym artykule przyjrzymy się możliwym rozwiązaniom pozwalającym wykryć, kiedy strona PHP wewnątrz ramki iframe jest przeładowywana oraz w jaki sposób można zaimplementować moduł ładujący w odpowiedzi na takie zmiany. Chociaż nie masz dostępu do samego kodu PHP, JavaScript może oferować kreatywne rozwiązania.

Odkrywanie rozwiązań do wykrywania przeładowań ramek iframe w Angular

W pierwszym skrypcie kluczową ideą jest nasłuchiwanie obciążenie zdarzenie elementu iframe. Zdarzenie ładowania jest wyzwalane za każdym razem, gdy zawartość elementu iframe ulegnie zmianie lub zostanie ponownie załadowana. Korzystając z tego zdarzenia, możemy wykryć, kiedy strona PHP wewnątrz ramki iframe jest odświeżana. Początkowo spinner ładujący jest pokazywany poprzez wywołanie funkcji pokażSpinnera. Po całkowitym załadowaniu zawartości iframe plik ukryj Spinnera funkcja jest wywoływana w celu ukrycia pokrętła. Ta metoda jest dość wydajna, ponieważ nie wymaga dostępu do kodu PHP, a po prostu opiera się na stanie elementu iframe.

Drugie rozwiązanie opiera się na bardziej zaawansowanym podejściu, wstrzykując JavaScript bezpośrednio do elementu iframe. Uzyskując dostęp do elementu iframe zawartość okna, możemy dynamicznie utworzyć i wstawić element skryptu do DOM elementu iframe. Ten skrypt śledzi wszelkie żądania HTTP inicjowane przez stronę PHP wewnątrz ramki iframe, używając zarówno Żądanie XMLHttp i Pobierz API. Celem jest monitorowanie aktywności sieciowej w elemencie iframe i wyświetlanie paska ładowania w przypadku wystąpienia takiej aktywności. Takie podejście zapewnia bardziej szczegółową kontrolę poprzez śledzenie dokładnego momentu wykonania żądań HTTP.

Trzecia metoda wykorzystuje opublikujWiadomość API, które umożliwia komunikację pomiędzy ramką iframe a nadrzędną aplikacją Angular. W tym przypadku element iframe wysyła wiadomość do elementu nadrzędnego po zakończeniu ładowania. Okno nadrzędne nasłuchuje tych komunikatów i odpowiednio wyświetla lub ukrywa pokrętło. Zaletą korzystania z postMessage jest to, że jest to bezpieczny sposób wymiany informacji między oknami, nawet jeśli nie masz dostępu do wewnętrznego kodu elementu iframe. Jest to idealne rozwiązanie w przypadku ramek iframe pochodzących z różnych źródeł, w których element nadrzędny i ramka iframe pochodzą z różnych domen.

Każde z tych rozwiązań ma swoje mocne strony, a wybór metody zależy od wymaganego poziomu kontroli i zachowania elementu iframe. Detektor zdarzeń ładowania jest prosty, ale działa tylko w celu wykrywania pełnych przeładowań. Wstrzyknięcie skryptu do ramki iframe daje bardziej szczegółowy wgląd w jego działanie, ale wymaga, aby ramka iframe umożliwiła wstawienie skryptu. Wreszcie, opublikujWiadomość metoda jest solidnym rozwiązaniem do obsługi komunikacji między domenami i może powiadamiać element nadrzędny o określonych zdarzeniach iframe. Metody te zapewniają elastyczne sposoby obsługi zmian stanu ramki iframe bez konieczności bezpośredniego dostępu do kodu PHP.

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

Zaawansowane techniki monitorowania zmian iframe w Angular

Inną interesującą techniką wykrywania zmian w ramce iframe jest użycie metody Obserwator Mutacji API. Ten interfejs API umożliwia monitorowanie zmian w drzewie DOM, na przykład dodawania lub usuwania nowych węzłów. Chociaż nie powiadomi Cię to bezpośrednio o ponownym załadowaniu strony PHP, może pomóc wykryć zmiany w zawartości elementu iframe. Na przykład, jeśli pewne elementy w elemencie iframe zostaną zastąpione lub zaktualizowane po ponownym załadowaniu, plik Obserwator Mutacji może wychwycić te zmiany i odpowiednio uruchomić pokrętło.

Ponadto wykorzystanie zdarzeń przeglądarki, takich jak przed rozładunkiem Lub rozładować może pomóc wykryć, kiedy ramka iframe ma się wkrótce przeładować. Te zdarzenia są wywoływane, gdy strona jest wyładowywana lub gdy inicjowana jest nawigacja poza bieżącą stroną. Dodając detektory zdarzeń do tych zdarzeń w elemencie iframe, możesz powiadomić okno nadrzędne o zbliżającym się przeładowaniu, upewniając się, że pokrętło zostanie wyświetlone we właściwym czasie. Ta metoda działa najlepiej w połączeniu z innymi podejściami, zapewniając kompleksowe rozwiązanie.

Na koniec możesz rozważyć użycie odpytywania elementów iframe jako metody sprawdzania zmian. W tej metodzie nadrzędna aplikacja Angular okresowo sprawdza plik iframe Adres URL lub inne określone elementy w elemencie iframe, aby określić, czy treść uległa zmianie lub została ponownie załadowana. Chociaż to podejście może być mniej wydajne, szczególnie pod względem wydajności, jest to opcja awaryjna, gdy inne metody nie są wykonalne. Wadą jest to, że odpytywanie może nie wykryć wszystkich zmian na stronie, ale nadal może być przydatne w określonych scenariuszach.