使用 Angular 检测 Iframe 中的 PHP 页面重新加载

解决方案 1：使用“load”事件监控 iframe 重新加载

该解决方案使用 JavaScript 监听 iframe 的“load”事件，检测 iframe 何时重新加载或更改内容。

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

解决方案2：将JavaScript注入iframe以跟踪网络请求

此方法将脚本注入 iframe 中以检测任何 HTTP 请求或重新加载，当您需要跟踪页内更改或从 iframe 内重新加载时非常有用。

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

方案3：使用postMessage在iframe和parent之间进行通信

此方法使用“postMessage”API 在 iframe 和父窗口之间进行通信，通知父窗口 iframe 中的任何重新加载或更改。

// 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 重新加载的常见问题

1. 如何检测 iframe 重新加载？
2. 您可以使用 addEventListener("load") 用于检测 iframe 何时重新加载或其内容更改的事件。
3. 是否可以在iframe中监控网络请求？
4. 是的，通过将脚本注入 iframe，您可以覆盖 fetch 和 XMLHttpRequest.prototype.open 跟踪 HTTP 请求的方法。
5. 我可以使用 postMessage 在 iframe 和父窗口之间进行通信吗？
6. 是的， postMessage API 允许 iframe 与其父窗口之间进行安全通信，从而实现它们之间的消息传递。
7. 如果我无法将 JavaScript 注入 iframe 该怎么办？
8. 如果您无权注入 JavaScript，请使用 MutationObserver API 或 postMessage iframe 中的方法（如果支持的话）是潜在的替代方案。
9. MutationObserver 如何帮助检测 iframe 更改？
10. 这 MutationObserver API 监视 DOM 中的变化，当 iframe 中的元素在重新加载后发生变化时，它可以向您发出警报。

关于在 Angular 中监控 Iframe 重新加载的最终想法

通过创造性的 JavaScript 解决方案，可以在不直接访问底层 PHP 代码的情况下监控 iframe 重新加载。无论是使用事件侦听器、注入脚本还是 postMessage API，开发人员都可以选择确保其 Angular 应用程序保持响应能力。

每种方法都有其优点，具体取决于项目的复杂性和对 iframe 的控制。通过利用适合您的具体情况的最佳解决方案，您可以在 iframe 内容更改期间通过可靠的微调器通知提供更好的用户体验。