Виявлення перезавантаження PHP-сторінки в iframe за допомогою Angular

Обробка перезавантажень iframe у програмах Angular

У сучасній веб-розробці поширеним підходом є вбудовування зовнішніх програм, таких як сторінка PHP, у проект Angular через iframe. Однак це створює труднощі під час спроб відстежувати події чи перезавантаження сторінок у цьому iframe, особливо коли у вас немає доступу до коду проекту PHP.

Одна з таких проблем виникає, коли вам потрібно відображати завантажувальний лічильник у вашому додатку Angular щоразу, коли оновлюється вміст iframe. Оскільки ви не можете змінити код PHP, виявлення перезавантажень або змін у вмісті iframe стає складним. Головне — знайти спосіб відстежувати зміни в iframe з боку JavaScript.

Багато розробників цікавляться, чи можливо вставити сценарій в iframe, який прослуховує такі події, як HTTP-запити або перезавантаження, особливо якщо iframe отримано з проекту, де ви не маєте прямого контролю над кодом. Потенційно це можна зробити за допомогою JavaScript у вашій програмі Angular.

У цій статті ми розглянемо можливі рішення для виявлення того, коли PHP-сторінка всередині iframe перезавантажується, і як ви можете реалізувати завантажувальний спінер у відповідь на такі зміни. Хоча ви не маєте доступу до самого коду PHP, JavaScript може запропонувати творчі рішення.

Вивчення рішень для виявлення перезавантаження iframe в Angular

У першому сценарії ключова ідея полягає в тому, щоб слухати навантаження подія iframe. Подія завантаження запускається кожного разу, коли вміст iframe змінюється або перезавантажується. Використовуючи цю подію, ми можемо визначити, коли сторінка PHP всередині iframe оновлюється. Спочатку за допомогою виклику функції відображається завантажувальний спінер showSpinner. Коли вміст iframe повністю завантажиться, hideSpinner функція викликається, щоб приховати спінер. Цей метод досить ефективний, оскільки він не потребує доступу до коду PHP і просто покладається на стан iframe.

Друге рішення використовує більш просунутий підхід, вставляючи JavaScript безпосередньо в iframe. За допомогою доступу до iframe contentWindow, ми можемо динамічно створювати та вставляти елемент сценарію в DOM iframe. Цей сценарій відстежує будь-які HTTP-запити, ініційовані PHP-сторінкою всередині iframe, використовуючи як XMLHttpRequest і Fetch API. Метою тут є відстеження мережевої активності в межах iframe і відображення лічильника завантаження, коли така активність відбувається. Цей підхід пропонує більш детальний контроль шляхом відстеження точного моменту виконання HTTP-запитів.

Третій метод використовує postMessage API, який забезпечує зв’язок між iframe і батьківською програмою Angular. У цьому випадку iframe надсилає повідомлення батьківському елементу щоразу, коли завершує завантаження. Батьківське вікно прослуховує ці повідомлення та відповідно показує або приховує прямувач. Перевага використання postMessage полягає в тому, що це безпечний спосіб обміну інформацією між вікнами, навіть якщо у вас немає доступу до внутрішнього коду iframe. Це ідеально для перехресних джерел iframe, де батьківський і iframe походять з різних доменів.

Кожне з цих рішень має свої сильні сторони, і вибір методу залежить від необхідного рівня контролю та поведінки iframe. Прослуховувач подій завантаження простий, але працює лише для виявлення повних перезавантажень. Впровадження сценарію в iframe дає більш детальну інформацію про його діяльність, але вимагає, щоб iframe дозволяв вставку сценарію. Нарешті, postMessage Метод є надійним рішенням для обробки міждоменного зв’язку та може сповіщати батьків про певні події iframe. Ці методи забезпечують гнучкі способи обробки змін стану iframe без необхідності прямого доступу до коду 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);

Передові методи моніторингу змін iframe в Angular

Ще одна цікава техніка для виявлення змін в iframe – використання MutationObserver API. Цей API дозволяє відстежувати зміни в дереві DOM, наприклад коли додаються або видаляються нові вузли. Хоча це не сповіщатиме вас безпосередньо про перезавантаження сторінки PHP, це може допомогти виявити зміни у вмісті iframe. Наприклад, якщо певні елементи в iframe замінено або оновлено після перезавантаження, MutationObserver може вловити ці зміни та запустити спінер відповідно.

Крім того, використання подій браузера, таких як перед розвантаженням або розвантажити може допомогти визначити, коли iframe збирається перезавантажитися. Ці події запускаються, коли сторінка вивантажується або коли починається навігація з поточної сторінки. Додавши прослуховувачі подій до цих подій всередині iframe, ви можете повідомити батьківське вікно про те, що має відбутися перезавантаження, гарантуючи, що лічильник буде показано в потрібний час. Цей метод найкраще працює в поєднанні з іншими підходами, забезпечуючи комплексне рішення.

Нарешті, ви можете розглянути можливість використання опитування iframe як метод перевірки змін. У цьому методі батьківська програма Angular періодично перевіряє iframe URL-адреса або інші конкретні елементи в iframe, щоб визначити, чи вміст змінився чи перезавантажився. Хоча цей підхід може бути менш ефективним, особливо з точки зору продуктивності, він є резервним варіантом, коли інші методи неможливі. Недоліком є ​​те, що опитування може виявити не всі зміни на сторінці, але може бути корисним для певних сценаріїв.