Bagaimanakah Saya Boleh Mengesan Perubahan URL Selepas Hash dalam JavaScript?

Mengesan Perubahan URL Selepas Cincang dalam JavaScript

Apabila bekerja dengan tapak web berasaskan AJAX seperti GitHub, menentukan sama ada URL telah berubah boleh penting. JavaScript membenarkan kaedah yang berbeza untuk memantau perubahan URL.

Pilihan untuk Mengesan Perubahan URL:

• Acara onload: Acara ini dijalankan sahaja apabila halaman dimuat semula sepenuhnya, maka ia tidak sesuai untuk mengesan URL separa perubahan.
• Pengendali Acara URL: JavaScript tidak menyediakan pengendali acara langsung untuk perubahan URL.
• Semakan URL Biasa: Sentiasa menyemak URL setiap saat mungkin intensif sumber dan tidak praktikal.

Diperbaiki Kaedah: API Navigasi (2024)

Pelayar moden kini menyokong API Navigasi, yang menyediakan cara yang lebih cekap untuk mengesan perubahan URL. Begini cara ia berfungsi:

window.navigation.addEventListener("navigate", (event) => {
  console.log('location changed!');
});

Kaedah Alternatif (API Pra-Navigasi)

Jika API Navigasi tidak tersedia, pendekatan tersuai boleh digunakan menggunakan kod berikut:

(function () {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

Penyelesaian ini mengubah suai objek sejarah untuk menambah fungsi, membolehkan penciptaan acara tersuai pendengar, seperti:

window.addEventListener('locationchange', () => {
    console.log('location changed!');
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Perubahan URL Selepas Hash dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!