Bagaimanakah Saya Boleh Mengubah URL Penyemak Imbas Tanpa Memuat Semula Halaman Menggunakan JavaScript?

Mengubah URL Penyemak Imbas Tanpa Memuat Semula Halaman Menggunakan JavaScript

Banyak tindakan JavaScript mempengaruhi halaman semasa tetapi memerlukan perubahan URL untuk rujukan atau penanda halaman kemudian. Selain itu, terdapat keinginan untuk memulihkan URL asal apabila menggunakan butang "Kembali". Begini cara untuk mencapainya:

Pilihan 1: Menggunakan Pengecam Fragmen (Untuk Penyemak Imbas Lama)

Untuk penyemak imbas yang tidak menyokong history.pushState dan history.popState yang lebih baharu , terdapat cara "lama": menggunakan pengecam serpihan. Kaedah ini tidak memerlukan muat semula halaman.

Dengan memberikan nilai yang mengandungi maklumat keadaan yang diingini pada sifat window.location.hash, anda boleh mengekod keadaan ke dalam URL dengan berkesan. Seterusnya, anda perlu menggunakan acara window.onhashchange atau, untuk penyemak imbas lama, tinjauan nilai cincang secara berkala untuk mengesan perubahan. Mulakan kandungan halaman berdasarkan nilai cincang semasa memuatkan halaman.

Pilihan 2: history.pushState dan history.popState (Pelayar Moden)

Dalam penyemak imbas kontemporari, kaedah history.pushState dan history.popState menawarkan pendekatan yang lebih bersih dan mantap. history.pushState membolehkan anda mengemas kini URL tanpa memuat semula halaman, manakala history.popState mengendalikan pengendalian butang "Kembali". Kaedah ini disokong oleh semua penyemak imbas moden utama.

Mengelakkan Perlanggaran Id

Apabila bekerja dengan pengecam serpihan, berhati-hati tentang kemungkinan perlanggaran dengan ID elemen pada halaman. Penyemak imbas cenderung untuk menatal ke mana-mana elemen yang IDnya sepadan dengan nilai cincang, yang boleh membawa kepada tingkah laku yang tidak dijangka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah URL Penyemak Imbas Tanpa Memuat Semula Halaman Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!