Bagaimana untuk Mengesan Perubahan URL, Termasuk Perubahan Hash, dalam JavaScript?

Mengesan Perubahan URL dengan Cincang dalam JavaScript

Memerhati perubahan dalam URL, termasuk yang selepas simbol cincang, adalah penting untuk aplikasi yang menggunakan AJAX untuk kemas kini halaman. JavaScript menyediakan beberapa pilihan untuk menjejaki perubahan URL.

Pengendali Acara

JavaScript menawarkan pengendali acara yang boleh digunakan untuk mengesan perubahan URL:

• onload: Acara ini tidak sesuai untuk mengesan perubahan URL selepas halaman awal muatkan.
• perubahan cincang: Peristiwa ini hanya tercetus apabila bahagian selepas simbol cincang berubah, tetapi bukan untuk pengubahsuaian URL lain.

Menyemak Secara Manual URL

Tinjauan URL pada selang masa yang tetap ialah pendekatan yang kasar tetapi boleh dipercayai untuk mengesan perubahan. Walau bagaimanapun, ia memerlukan pemasa yang berterusan dan mahal dari segi pengiraan.

API Sejarah Dipertingkat

Pelayar moden menyokong API Navigasi, yang menyediakan acara "navigasi" khusus. Peristiwa ini berlaku apabila lokasi berubah, tanpa mengira punca (cth., pushState, replaceState, perubahan cincang).

Polyfill untuk Penyemak Imbas Warisan

Untuk penyemak imbas yang tidak' t menyokong API Navigasi, objek sejarah yang diubah suai berikut boleh dilaksanakan:

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

Pengubahsuaian ini menambah acara "locationchange" tersuai yang mencetuskan semua operasi sejarah (pushState, replaceState, popstate) dan membenarkan pendengar acara dilampirkan untuk mengesan perubahan URL.

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