Bagaimana untuk Mengesan dan Membalas Perubahan URL dalam JavaScript?

Cara Mencetuskan Peristiwa Apabila URL Berubah

Apabila membangunkan skrip Greasemonkey untuk tapak web yang mengubah suai window.location.href secara berkala, ia adalah selalunya diperlukan untuk melakukan tindakan khusus sebagai tindak balas kepada perubahan URL ini. Walau bagaimanapun, menggunakan tinjauan pendapat atau tamat masa sebagai penyelesaian yang berpotensi boleh menjadi tidak cekap.

Untuk mengelakkan isu sedemikian, kami mengemukakan kaedah yang sangat berkesan yang menggunakan API MutationObserver. Dengan memantau perubahan dalam elemen badan, skrip ini boleh mengesan pengubahsuaian URL dengan berkesan dan menyediakan akses kepada DOM dokumen yang diubah suai:

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;
            /* Insert your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};

Sebagai alternatif, jika anda lebih suka pendekatan yang lebih ringkas dan moden, anda boleh menggunakan yang berikut skrip, yang memanfaatkan spesifikasi JavaScript terkini:

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;
      /* Insert your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;

Kaedah ini membolehkan anda melampirkan fungsi yang anda inginkan pada acara yang dicetuskan apabila URL berubah, memberikan akses kepada DOM dokumen yang diubah suai.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan dan Membalas Perubahan URL dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!