Bagaimana Mengesan Perubahan URL dalam JavaScript dengan Amanah?

Mengesan Perubahan URL dalam JavaScript

Untuk menjejaki perubahan URL dalam JavaScript, adalah penting untuk mengenal pasti kaedah yang boleh dipercayai. Walaupun acara onload tidak sesuai, terdapat beberapa pilihan yang berdaya maju.

1. Peristiwa Perubahan Cincang:

Acara ini tercetus hanya apabila bahagian URL selepas simbol # berubah. Ia terhad kepada perubahan berkaitan cincang.

2. Acara Popstate:

Acara ini berlaku apabila butang navigasi sejarah penyemak imbas (cth., ke belakang dan ke hadapan) digunakan atau apabila URL berubah melalui kaedah pushState atau replaceState. Walau bagaimanapun, ia mungkin tidak berfungsi dalam semua kes.

3. Acara Perubahan Lokasi Tersuai (Disyorkan):

Untuk memastikan pengesanan perubahan URL yang menyeluruh, pendengar acara tersuai, 'locationchange' boleh dilaksanakan. Ini melibatkan pengubahsuaian objek sejarah untuk mencetuskan peristiwa tersuai untuk semua perubahan keadaan sejarah (iaitu, pushState, replaceState dan popstate).

Pelaksanaan:

// Create a custom locationchange event
window.addEventListener('locationchange', () => {
    console.log('Location changed!');
});

// Modify history object to trigger custom events
(() => {
    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'));
    });
})();

Oleh menggunakan acara tersuai ini, anda boleh mengesan dengan berkesan sebarang perubahan URL, tidak kira sama ada ia berlaku melalui cincang, pushState atau replaceState. Kaedah ini menyediakan penyelesaian yang komprehensif untuk memantau perubahan URL dalam aplikasi JavaScript.

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