Bagaimana untuk Mengesan Perubahan URL Selepas Simbol Hash dalam JavaScript?

Mengesan Perubahan URL dalam JavaScript Selepas Simbol Hash

JavaScript menawarkan cara untuk mengesan jika URL telah berubah, termasuk pilihan berikut:

• Acara Onload:

  • Acara onload tidak dicetuskan apabila URL berubah selepas simbol cincang.

• Pengendali Acara untuk URL:

  • Tiada pengendali acara terbina dalam khusus untuk mengesan perubahan URL.

• Menyemak URL Setiap Saat:

  • Walaupun sentiasa menyemak URL setiap saat mungkin berkesan, ia tidak cekap dan boleh membawa kepada isu prestasi.

Menggunakan API Navigasi (Untuk Penyemak Imbas Moden)

Pelayar utama kini menyokong API Navigasi, yang menyediakan cara yang lebih cekap untuk mengesan perubahan URL :

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

Acara Tersuai untuk Penyemak Imbas Lama

Untuk penyemak imbas lama tanpa API Navigasi, pendengar acara tersuai boleh dibuat dengan mengubah suai objek sejarah:

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

Kini, anda boleh mendengar perubahan URL menggunakan acara "locationchange":

window.addEventListener("locationchange", function () {
    console.log("location changed!");
});

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