Phát hiện tải lại trang PHP trong Iframe bằng cách sử dụng Angular

Xử lý tải lại khung nội tuyến trong các ứng dụng góc

Trong phát triển web hiện đại, việc nhúng các ứng dụng bên ngoài như trang PHP vào bên trong dự án Angular thông qua iframe là một cách tiếp cận phổ biến. Tuy nhiên, nó đưa ra những thách thức khi cố gắng theo dõi các sự kiện hoặc tải lại trang trong iframe đó, đặc biệt là khi bạn không có quyền truy cập vào mã của dự án PHP.

Một thách thức như vậy nảy sinh khi bạn cần hiển thị một vòng quay tải trong ứng dụng Angular của mình bất cứ khi nào nội dung iframe được làm mới. Vì bạn không thể sửa đổi mã PHP nên việc phát hiện tải lại hoặc thay đổi nội dung iframe trở nên khó khăn. Điều quan trọng là tìm cách theo dõi các thay đổi trong iframe từ phía JavaScript.

Nhiều nhà phát triển thắc mắc liệu có thể chèn tập lệnh vào iframe để xử lý các sự kiện như yêu cầu HTTP hoặc tải lại hay không, đặc biệt nếu iframe có nguồn gốc từ một dự án mà bạn thiếu quyền kiểm soát trực tiếp mã. Điều này có thể được thực hiện thông qua JavaScript trong ứng dụng Angular của bạn.

Trong bài viết này, chúng ta sẽ khám phá các giải pháp khả thi để phát hiện thời điểm trang PHP bên trong iframe đang tải lại và cách bạn có thể triển khai vòng quay tải để phản hồi những thay đổi đó. Mặc dù bạn không có quyền truy cập vào mã PHP nhưng JavaScript có thể cung cấp các giải pháp sáng tạo.

Khám phá các giải pháp phát hiện tải lại iframe trong Angular

Trong kịch bản đầu tiên, ý tưởng chính là lắng nghe trọng tải sự kiện của iframe. Sự kiện tải được kích hoạt mỗi khi nội dung của iframe thay đổi hoặc tải lại. Bằng cách sử dụng sự kiện này, chúng tôi có thể phát hiện khi trang PHP bên trong iframe được làm mới. Ban đầu, vòng quay tải được hiển thị bằng cách gọi hàm hiệnSpinner. Khi nội dung iframe tải đầy đủ, ẩnSpinner hàm được gọi để ẩn spinner. Phương pháp này khá hiệu quả vì nó không yêu cầu quyền truy cập vào mã PHP và chỉ dựa vào trạng thái của iframe.

Giải pháp thứ hai áp dụng cách tiếp cận nâng cao hơn bằng cách đưa JavaScript trực tiếp vào iframe. Bằng cách truy cập iframe nội dungWindow, chúng ta có thể tự động tạo và chèn phần tử tập lệnh vào DOM của iframe. Tập lệnh này theo dõi mọi yêu cầu HTTP do trang PHP khởi tạo bên trong iframe, sử dụng cả Yêu cầu XMLHttp và Tìm nạp API. Mục tiêu ở đây là giám sát hoạt động mạng trong iframe và hiển thị vòng quay tải khi bất kỳ hoạt động nào như vậy xảy ra. Cách tiếp cận này cung cấp khả năng kiểm soát chi tiết hơn bằng cách theo dõi chính xác thời điểm các yêu cầu HTTP được thực hiện.

Phương pháp thứ ba tận dụng bài đăngMessage API, cho phép giao tiếp giữa iframe và ứng dụng Angular gốc. Trong trường hợp này, iframe sẽ gửi tin nhắn đến cha mẹ bất cứ khi nào nó tải xong. Cửa sổ chính lắng nghe những thông báo này và hiển thị hoặc ẩn vòng quay tương ứng. Ưu điểm của việc sử dụng postMessage là đây là cách an toàn để trao đổi thông tin giữa các cửa sổ, ngay cả khi bạn không có quyền truy cập vào mã nội bộ của iframe. Đó là lý tưởng cho các iframe có nguồn gốc chéo trong đó iframe gốc và iframe đến từ các miền khác nhau.

Mỗi giải pháp này đều có điểm mạnh và việc lựa chọn phương pháp tùy thuộc vào mức độ kiểm soát bạn cần và hoạt động của iframe. Trình xử lý sự kiện tải rất đơn giản nhưng chỉ hoạt động để phát hiện các lần tải lại đầy đủ. Việc đưa tập lệnh vào iframe sẽ cung cấp thông tin chi tiết hơn về hoạt động của tập lệnh đó nhưng yêu cầu iframe phải cho phép chèn tập lệnh. Cuối cùng, bài đăngMessage phương pháp này là một giải pháp mạnh mẽ để xử lý giao tiếp giữa các miền và có thể thông báo cho cấp độ gốc về các sự kiện iframe cụ thể. Các phương pháp này cung cấp những cách linh hoạt để xử lý các thay đổi trạng thái iframe mà không yêu cầu quyền truy cập trực tiếp vào mã 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);

Các kỹ thuật nâng cao để theo dõi các thay đổi của khung nội tuyến trong góc

Một kỹ thuật thú vị khác để phát hiện các thay đổi trong iframe là sử dụng Người quan sát đột biến API. API này cho phép bạn theo dõi các thay đổi trong cây DOM, chẳng hạn như khi các nút mới được thêm hoặc xóa. Mặc dù điều này sẽ không thông báo trực tiếp cho bạn khi trang PHP tải lại nhưng nó có thể giúp phát hiện các thay đổi trong nội dung của iframe. Ví dụ: nếu một số thành phần nhất định trong iframe được thay thế hoặc cập nhật sau khi tải lại, Người quan sát đột biến có thể nắm bắt những thay đổi đó và kích hoạt công cụ quay vòng tương ứng.

Ngoài ra, tận dụng các sự kiện trình duyệt như trước khi dỡ tải hoặc dỡ hàng có thể giúp phát hiện khi iframe sắp tải lại. Những sự kiện này xảy ra khi trang đang được dỡ tải hoặc khi bắt đầu điều hướng khỏi trang hiện tại. Bằng cách thêm trình xử lý sự kiện vào các sự kiện này bên trong iframe, bạn có thể thông báo cho cửa sổ chính rằng quá trình tải lại sắp diễn ra, đảm bảo rằng vòng quay được hiển thị vào đúng thời điểm. Phương pháp này hoạt động tốt nhất khi kết hợp với các phương pháp khác, mang lại giải pháp toàn diện.

Cuối cùng, bạn có thể cân nhắc sử dụng tính năng bỏ phiếu bằng iframe làm phương pháp kiểm tra các thay đổi. Trong phương pháp này, ứng dụng Angular gốc sẽ kiểm tra định kỳ khung nội tuyến URL hoặc các thành phần cụ thể khác trong iframe để xác định xem nội dung đã thay đổi hay được tải lại. Mặc dù phương pháp này có thể kém hiệu quả hơn, đặc biệt là về mặt hiệu suất, nhưng đây là một lựa chọn dự phòng khi các phương pháp khác không khả thi. Nhược điểm là việc bỏ phiếu có thể không phát hiện được tất cả các thay đổi trong trang nhưng vẫn có thể hữu ích cho các tình huống cụ thể.