使用 JavaScript 和 Angular 在 iF​​rame 中查找 PHP 页面重新加载

解决方案 1：使用 JavaScript 通过窗口事件侦听器检测 iFrame 页面重新加载

此方法涉及使用 JavaScript 事件侦听器来监视 Angular 前端内的 iFrame 加载事件。它通过监听 iFrame 内容的变化来跟踪页面重新加载。

// Select the iFrame element
const iframe = document.querySelector('iframe');
// Function to show the loading spinner
function showSpinner() {
  document.getElementById('spinner').style.display = 'block';
}
// Function to hide the loading spinner
function hideSpinner() {
  document.getElementById('spinner').style.display = 'none';
}
// Add an event listener to detect iFrame reloads
iframe.addEventListener('load', function () {
  hideSpinner();
});
// Detect when the iFrame source changes
iframe.onload = function() {
  showSpinner();
};
// Example HTML for the spinner
<div id="spinner" style="display: none;">Loading...</div>

解决方案 2：使用代理方法监控来自 iFrame 的网络请求

该解决方案使用 iFrame 代理或“XMLHttpRequest”对象来监视来自 iFrame 的网络请求，以检测 PHP 项目内的活动更改。

// Create a proxy for monitoring iFrame network activity
const iframeWindow = document.querySelector('iframe').contentWindow;
// Override the XMLHttpRequest to detect network activity
const originalXhr = iframeWindow.XMLHttpRequest;
iframeWindow.XMLHttpRequest = function() {
  const xhr = new originalXhr();
  xhr.addEventListener('loadstart', function() {
    document.getElementById('spinner').style.display = 'block';
  });
  xhr.addEventListener('loadend', function() {
    document.getElementById('spinner').style.display = 'none';
  });
  return xhr;
};
// HTML for spinner
<div id="spinner" style="display: none;">Loading...</div>

解决方案 3：使用 MutationObserver 检测 iFrame 重新加载

这种方法利用“MutationObserver” API 来监视 iFrame DOM 的更改，这可用于检测页面重新加载或动态内容更改。

// Select the iFrame's document
const iframe = document.querySelector('iframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// Show the spinner
function showSpinner() {
  document.getElementById('spinner').style.display = 'block';
}
// Hide the spinner
function hideSpinner() {
  document.getElementById('spinner').style.display = 'none';
}
// Create a MutationObserver to watch for changes in the iFrame document
const observer = new MutationObserver(function(mutations) {
  showSpinner();
  // Delay to simulate loading time
  setTimeout(hideSpinner, 500);
});
// Start observing the iFrame document
observer.observe(iframeDocument, { childList: true, subtree: true });
// HTML spinner
<div id="spinner" style="display: none;">Loading...</div>

有关 Angular 中 iFrame 监控的常见问题解答

1. 什么是 postMessage 方法以及何时使用？
2. 这 postMessage 方法允许父窗口和 iFrame 之间的安全通信，即使它们位于不同的域中。使用它在两者之间发送消息以执行检测页面重新加载或其他活动等操作。
3. 如何检测 iFrame 何时进入或退出视口？
4. 这 IntersectionObserver API 非常适合此目的。它监视元素（如 iFrame）的可见性，并在元素从用户视图中出现或消失时触发事件。
5. 如何检测 iFrame 中何时发生网络错误？
6. 您可以使用 onerror 事件来捕获 iFrame 中的加载错误，例如失败的网络请求。这可以帮助您优雅地处理错误并通知用户。
7. 访问 iFrame 内容有哪些限制？
8. 由于同源策略，如果 iFrame 从不同域加载，您将无法直接访问 iFrame 的内容。您必须使用类似的方法 postMessage 用于域之间的安全通信。
9. 当 iFrame 不在视图中时，是否可以暂停网络请求？
10. 是的，使用 IntersectionObserver，您可以检测 iFrame 何时不在视图中，并暂停任何不必要的网络请求或渲染以优化性能。

关于 iFrame 页面监控的最终想法

在不访问底层 PHP 代码的情况下检测 iFrame 重新加载可能具有挑战性，但 JavaScript 提供了几种有效的解决方案。通过利用 事件监听器、网络请求跟踪和 DOM 突变观察，您可以显示加载微调器以通知用户正在进行的进程。

这些方法不仅增强了用户体验，还有助于优化性能并确保 Angular 和嵌入式 PHP 内容之间的无缝集成。监视 iFrame 活动是向用户提供实时反馈、提高整体应用程序响应能力的关键。