Mengesan Muat Semula Halaman PHP dalam Iframe Menggunakan Sudut

Mengendalikan Muat Semula Iframe dalam Aplikasi Sudut

Dalam pembangunan web moden, membenamkan aplikasi luaran seperti halaman PHP di dalam projek Angular melalui iframe adalah pendekatan biasa. Walau bagaimanapun, ia memperkenalkan cabaran apabila cuba memantau acara atau muat semula halaman dalam iframe itu, terutamanya apabila anda tidak mempunyai akses kepada kod projek PHP.

Satu cabaran sedemikian timbul apabila anda perlu memaparkan pemutar pemuatan dalam aplikasi Sudut anda apabila kandungan iframe dimuat semula. Memandangkan anda tidak boleh mengubah suai kod PHP, mengesan muat semula atau perubahan pada kandungan iframe menjadi sukar. Kuncinya ialah mencari cara untuk menjejaki perubahan dalam iframe dari sisi JavaScript.

Ramai pembangun tertanya-tanya sama ada mungkin untuk menyuntik skrip ke dalam iframe yang mendengar acara seperti permintaan HTTP atau muat semula, terutamanya jika iframe diperoleh daripada projek yang anda tidak mempunyai kawalan langsung ke atas kod tersebut. Ini berpotensi dilakukan melalui JavaScript dalam aplikasi Angular anda.

Dalam artikel ini, kami akan meneroka kemungkinan penyelesaian untuk mengesan apabila halaman PHP dalam iframe dimuatkan semula dan cara anda boleh melaksanakan pemutar pemuatan sebagai tindak balas kepada perubahan tersebut. Walaupun anda tidak mempunyai akses kepada kod PHP itu sendiri, JavaScript boleh menawarkan penyelesaian kreatif.

Meneroka Penyelesaian untuk Mengesan Muat Semula Iframe dalam Sudut

Dalam skrip pertama, idea utama adalah untuk mendengar memuatkan peristiwa iframe. Peristiwa pemuatan dicetuskan setiap kali kandungan iframe berubah atau dimuat semula. Dengan menggunakan acara ini, kami boleh mengesan apabila halaman PHP di dalam iframe dimuat semula. Pada mulanya, pemutar pemuatan ditunjukkan dengan memanggil fungsi showSpinner. Setelah kandungan iframe dimuatkan sepenuhnya, fail hideSpinner fungsi dipanggil untuk menyembunyikan pemutar. Kaedah ini agak cekap kerana ia tidak memerlukan akses kepada kod PHP dan hanya bergantung pada keadaan iframe.

Penyelesaian kedua mengambil pendekatan yang lebih maju dengan menyuntik JavaScript terus ke dalam iframe. Dengan mengakses iframe contentWindow, kami boleh mencipta dan memasukkan elemen skrip secara dinamik ke dalam DOM iframe. Skrip ini menjejaki sebarang permintaan HTTP yang dimulakan oleh halaman PHP di dalam iframe, menggunakan kedua-dua XMLHttpRequest dan Ambil API. Matlamat di sini adalah untuk memantau aktiviti rangkaian dalam iframe dan memaparkan pemutar pemuatan apabila sebarang aktiviti sedemikian berlaku. Pendekatan ini menawarkan kawalan yang lebih terperinci dengan menjejaki masa yang tepat permintaan HTTP dibuat.

Kaedah ketiga memanfaatkan postMessage API, yang membenarkan komunikasi antara iframe dan aplikasi Sudut induk. Dalam kes ini, iframe menghantar mesej kepada ibu bapa apabila ia selesai dimuatkan. Tetingkap induk mendengar mesej ini dan menunjukkan atau menyembunyikan pemutar dengan sewajarnya. Kelebihan menggunakan postMessage ialah ia merupakan cara yang selamat untuk bertukar maklumat antara tingkap, walaupun anda tidak mempunyai akses kepada kod dalaman iframe. Ia sesuai untuk iframe silang asal yang mana induk dan iframe berasal daripada domain yang berbeza.

Setiap penyelesaian ini mempunyai kekuatannya, dan pilihan kaedah bergantung pada tahap kawalan yang anda perlukan dan gelagat iframe. Pendengar acara muatkan adalah mudah tetapi hanya berfungsi untuk mengesan muat semula penuh. Menyuntik skrip ke dalam iframe memberikan cerapan yang lebih terperinci tentang aktivitinya tetapi memerlukan iframe untuk membenarkan sisipan skrip. Akhirnya, yang postMessage kaedah ialah penyelesaian yang mantap untuk mengendalikan komunikasi merentas domain dan boleh memberitahu ibu bapa tentang peristiwa iframe tertentu. Kaedah ini menyediakan cara yang fleksibel untuk mengendalikan perubahan keadaan iframe tanpa memerlukan akses terus kepada kod 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 Lanjutan untuk Memantau Perubahan Iframe dalam Sudut

Satu lagi teknik menarik untuk mengesan perubahan dalam iframe adalah dengan menggunakan Pemerhati Mutasi API. API ini membolehkan anda memantau perubahan dalam pepohon DOM, seperti apabila nod baharu ditambah atau dialih keluar. Walaupun ini tidak akan memberitahu anda secara langsung apabila halaman PHP dimuat semula, ia boleh membantu mengesan perubahan dalam kandungan iframe. Contohnya, jika elemen tertentu dalam iframe diganti atau dikemas kini selepas muat semula, fail Pemerhati Mutasi boleh menangkap perubahan tersebut dan mencetuskan pemutar dengan sewajarnya.

Selain itu, memanfaatkan acara penyemak imbas seperti sebelum memunggah atau memunggah boleh membantu mengesan apabila iframe hendak dimuat semula. Peristiwa ini berlaku apabila halaman sedang dipunggah atau apabila navigasi menjauhi halaman semasa dimulakan. Dengan menambahkan pendengar acara pada acara ini di dalam iframe, anda boleh memberitahu tetingkap induk bahawa muat semula akan berlaku, memastikan pemutar ditunjukkan pada masa yang betul. Kaedah ini berfungsi paling baik apabila digabungkan dengan pendekatan lain, memberikan penyelesaian yang komprehensif.

Akhir sekali, anda boleh mempertimbangkan untuk menggunakan tinjauan iframe sebagai kaedah untuk menyemak perubahan. Dalam kaedah ini, apl Angular induk menyemak secara berkala iframe URL atau elemen khusus lain dalam iframe untuk menentukan sama ada kandungan telah berubah atau dimuat semula. Walaupun pendekatan ini mungkin kurang cekap, terutamanya dari segi prestasi, ia merupakan pilihan sandaran apabila kaedah lain tidak boleh dilaksanakan. Kelemahannya ialah tinjauan pendapat mungkin tidak mengesan semua perubahan dalam halaman tetapi masih boleh berguna untuk senario tertentu.