Bagaimanakah saya boleh Mengesan dan Mengendalikan Perubahan Navigasi dalam Halaman Web Menggunakan JavaScript?

Mengendalikan Perubahan Navigasi dengan Pendengar Acara

Apabila pengguna menavigasi ke URL baharu dalam halaman web, ia mungkin mencabar untuk menangkap acara dan akses DOM halaman yang baru dimuatkan. Untuk menangani perkara ini, kami akan meneroka penyelesaian menggunakan API pemerhati JavaScript yang berkuasa.

Memerhati Mutasi DOM
Daripada bergantung pada tamat masa atau pengundian, kami boleh menggunakan MutationObserver untuk memantau perubahan kepada pokok DOM. Dengan memerhati elemen, kami boleh mengesan apabila kandungan halaman telah diubah suai disebabkan oleh lokasi yang diubah.href.

Contoh Pelaksanaan
Berikut ialah coretan kod yang menunjukkan penggunaan MutationObserver untuk memantau tetingkap .location.href perubahan:

<code class="javascript">var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Changed ! your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

Spesifikasi JavaScript Terkini
Dalam JavaScript moden, anda boleh menggunakan fungsi anak panah dan sintaks yang dipermudahkan sedikit untuk mencapai fungsi yang sama:

<code class="javascript">const observeUrlChange = () => {
  let oldHref = document.location.href;
  const body = document.querySelector('body');
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href;
      /* Changed ! your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

Dengan menggunakan pendekatan dipacu peristiwa ini, anda boleh mengelakkan pengundian atau tamat masa dan menangkap perubahan URL dengan cara yang berprestasi dan boleh dipercayai. Ini membolehkan anda mengakses DOM halaman yang baru dimuatkan dan melaksanakan tindakan yang anda inginkan apabila pengguna menavigasi dalam halaman web yang sama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Mengesan dan Mengendalikan Perubahan Navigasi dalam Halaman Web Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!