Bagaimana untuk Mengesan Perubahan URL dalam JavaScript?

Cara Mengesan Perubahan URL dalam JavaScript dengan Pendengar Acara

Memantau perubahan URL adalah penting untuk banyak aplikasi JavaScript, terutamanya yang menggunakan AJAX dan tunggal - seni bina halaman. Dalam artikel ini, kami akan menyiasat pelbagai kaedah yang tersedia untuk mengesan perubahan URL dan meneroka pendekatan yang paling berkesan.

Pengendali Acara untuk Perubahan URL

Terdapat berbilang pengendali acara yang boleh digunakan untuk menjejaki perubahan URL dalam JavaScript. Yang paling biasa termasuk:

• Peristiwa 'hashchange': Memantau perubahan dalam bahagian URL berikutan simbol '#'.
• Acara 'popstate': Diaktifkan apabila butang belakang atau hadapan penyemak imbas digunakan atau apabila objek sejarah diubah suai (cth., melalui pushState atau replaceState).

Pengendali acara ini menyediakan cara yang boleh dipercayai untuk mengesan perubahan URL, tetapi mereka mempunyai had. Peristiwa 'perubahan hash' hanya tercetus apabila serpihan selepas '#' berubah, manakala acara 'popstate' mungkin tidak sentiasa menyala dengan pasti.

Acara Tersuai untuk Pemantauan URL Komprehensif

Untuk mengatasi had pengendali acara sedia ada, acara tersuai boleh dibuat untuk memantau semua perubahan URL. Dengan mengubah suai objek sejarah, kami boleh memastikan bahawa acara 'locationchange' tersuai dicetuskan setiap kali URL dikemas kini melalui pushState, replaceState atau acara popstate.

Berikut ialah kod untuk melaksanakan acara tersuai:

(() => {
    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'));
    });
})();

Dengan pengubahsuaian ini, anda kini boleh menambah pendengar acara untuk acara 'perubahan lokasi' untuk mengesan sebarang perubahan URL boleh dipercayai.

Kesimpulan

Menggunakan pengendali acara atau melaksanakan acara tersuai menyediakan kaedah yang berkesan untuk memantau perubahan URL dalam JavaScript. Setiap pendekatan mempunyai kelebihan dan batasannya sendiri. Dengan memahami pilihan ini dan memilih pendekatan yang paling sesuai berdasarkan keperluan khusus, pembangun boleh memastikan aplikasi mereka bertindak balas dengan berkesan terhadap perubahan URL.

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