Mendeteksi Reload Halaman PHP di Iframe Menggunakan Angular

Menangani Pemuatan Ulang Iframe di Aplikasi Angular

Dalam pengembangan web modern, menyematkan aplikasi eksternal seperti halaman PHP di dalam proyek Angular melalui iframe adalah pendekatan yang umum. Namun, hal ini menimbulkan tantangan ketika mencoba memantau peristiwa atau memuat ulang halaman dalam iframe tersebut, terutama ketika Anda tidak memiliki akses ke kode proyek PHP.

Salah satu tantangan tersebut muncul ketika Anda perlu menampilkan spinner pemuatan di aplikasi Angular Anda setiap kali konten iframe di-refresh. Karena Anda tidak dapat mengubah kode PHP, mendeteksi pemuatan ulang atau perubahan pada konten iframe menjadi rumit. Kuncinya adalah menemukan cara untuk melacak perubahan di iframe dari sisi JavaScript.

Banyak pengembang bertanya-tanya apakah mungkin untuk memasukkan skrip ke dalam iframe yang mendengarkan peristiwa seperti permintaan HTTP atau memuat ulang, terutama jika iframe bersumber dari proyek di mana Anda tidak memiliki kendali langsung atas kodenya. Hal ini berpotensi dapat dilakukan melalui JavaScript di aplikasi Angular Anda.

Pada artikel ini, kita akan mengeksplorasi solusi yang mungkin untuk mendeteksi ketika halaman PHP di dalam iframe sedang dimuat ulang, dan bagaimana Anda dapat mengimplementasikan Loading Spinner sebagai respons terhadap perubahan tersebut. Meskipun Anda tidak memiliki akses ke kode PHP itu sendiri, JavaScript dapat menawarkan solusi kreatif.

Menjelajahi Solusi untuk Mendeteksi Pemuatan Ulang Iframe di Angular

Dalam naskah pertama, ide kuncinya adalah mendengarkan memuat acara iframe. Peristiwa load dipicu setiap kali konten iframe berubah atau dimuat ulang. Dengan menggunakan event ini, kita dapat mendeteksi kapan halaman PHP di dalam iframe di-refresh. Awalnya, spinner pemuatan ditampilkan dengan memanggil fungsi tersebut pertunjukanSpinner. Setelah konten iframe dimuat sepenuhnya, file sembunyikanSpinner fungsi dipanggil untuk menyembunyikan spinner. Cara ini cukup efisien karena tidak memerlukan akses ke kode PHP, dan hanya mengandalkan status iframe.

Solusi kedua mengambil pendekatan yang lebih maju dengan memasukkan JavaScript langsung ke iframe. Dengan mengakses iframe jendela konten, kita dapat secara dinamis membuat dan menyisipkan elemen skrip ke dalam DOM iframe. Skrip ini melacak setiap permintaan HTTP yang dimulai oleh halaman PHP di dalam iframe, menggunakan keduanya Permintaan XMLHttp dan itu Ambil API. Tujuannya di sini adalah untuk memantau aktivitas jaringan dalam iframe dan menampilkan spinner pemuatan ketika aktivitas tersebut terjadi. Pendekatan ini menawarkan kontrol yang lebih terperinci dengan melacak saat yang tepat permintaan HTTP dibuat.

Metode ketiga memanfaatkan pascaPesan API, yang memungkinkan komunikasi antara iframe dan aplikasi induk Angular. Dalam hal ini, iframe mengirimkan pesan ke induk setiap kali selesai memuat. Jendela induk mendengarkan pesan-pesan ini dan menampilkan atau menyembunyikan spinner yang sesuai. Keuntungan menggunakan postMessage adalah cara aman untuk bertukar informasi antar jendela, bahkan saat Anda tidak memiliki akses ke kode internal iframe. Ini ideal untuk iframe lintas asal yang induk dan iframenya berasal dari domain berbeda.

Masing-masing solusi ini memiliki kelebihannya sendiri, dan pilihan metode bergantung pada tingkat kontrol yang Anda perlukan dan perilaku iframe. Pemroses peristiwa pemuatan sederhana tetapi hanya berfungsi untuk mendeteksi pemuatan ulang penuh. Memasukkan skrip ke dalam iframe memberikan wawasan yang lebih mendetail tentang aktivitasnya tetapi memerlukan iframe untuk mengizinkan penyisipan skrip. Akhirnya, itu pascaPesan Metode ini merupakan solusi tangguh untuk menangani komunikasi lintas domain dan dapat memberi tahu induk tentang peristiwa iframe tertentu. Metode ini memberikan cara yang fleksibel untuk menangani perubahan status iframe tanpa memerlukan akses langsung ke kode 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);

Teknik Tingkat Lanjut untuk Memantau Perubahan Iframe di Angular

Teknik menarik lainnya untuk mendeteksi perubahan pada iframe adalah dengan menggunakan Pengamat Mutasi API. API ini memungkinkan Anda memantau perubahan di pohon DOM, seperti kapan node baru ditambahkan atau dihapus. Meskipun ini tidak secara langsung memberi tahu Anda ketika halaman PHP dimuat ulang, ini dapat membantu mendeteksi perubahan pada konten iframe. Misalnya, jika elemen tertentu di iframe diganti atau diperbarui setelah dimuat ulang, maka Pengamat Mutasi dapat menangkap perubahan tersebut dan memicu spinner sesuai dengan itu.

Selain itu, memanfaatkan peristiwa browser seperti sebelum membongkar atau membongkar dapat membantu mendeteksi kapan iframe akan dimuat ulang. Peristiwa ini terjadi ketika halaman sedang dibongkar atau ketika navigasi keluar dari halaman saat ini dimulai. Dengan menambahkan pendengar peristiwa ke peristiwa ini di dalam iframe, Anda dapat memberi tahu jendela induk bahwa pemuatan ulang akan segera dilakukan, memastikan bahwa spinner ditampilkan pada waktu yang tepat. Metode ini bekerja paling baik bila dikombinasikan dengan pendekatan lain, sehingga memberikan solusi yang komprehensif.

Terakhir, Anda dapat mempertimbangkan untuk menggunakan polling iframe sebagai metode untuk memeriksa perubahan. Dalam metode ini, aplikasi induk Angular memeriksa secara berkala iframe URL atau elemen spesifik lainnya dalam iframe untuk menentukan apakah konten telah diubah atau dimuat ulang. Meskipun pendekatan ini mungkin kurang efisien, terutama dalam hal kinerja, pendekatan ini merupakan opsi cadangan jika metode lain tidak memungkinkan. Kelemahannya adalah jajak pendapat mungkin tidak mendeteksi semua perubahan dalam halaman namun masih berguna untuk skenario tertentu.