Artikel ini akan menerangkan kaedah untuk mengubah suai URL tanpa memuatkan semula halaman web menggunakan JavaScript.
Bagaimana untuk Mengubah Suai/Tukar URL dalam JavaScript Tanpa Memuatkan Semula Halaman?
Untuk mengubah suai URL tanpa memuatkan semula halaman web, gunakan kaedah pratakrif JavaScript berikut:
Kaedah 1: Ubah suai URL dalam JavaScript Tanpa Memuat Semula Halaman Menggunakan Kaedah 'pushState()'.
Untuk mengubah suai URL tanpa memuat semula halaman web, gunakan ' pushState() ” kaedah. Ia adalah ciri atau kaedah yang telah ditetapkan bagi ' Objek sejarah ” yang membenarkan menukar sejarah penyemak imbas tanpa menavigasi atau menyegarkan halaman. Ia hanya menambah atau mengubah suai timbunan sejarah dan tidak memuatkan halaman baharu. Dengan menggunakan pendekatan ini, anda boleh bertukar-tukar antara halaman dengan menambahkan entri baharu pada timbunan sejarah penyemak imbas.
Sintaks
Ikuti sintaks yang diberikan untuk kaedah 'pushState()':
tingkap. sejarah . pushState ( negeri , tajuk , url ) ;
di sini:
- “ negeri ” mewakili catatan sejarah baharu.
- “ tajuk ” ialah teks tertentu yang boleh ditunjukkan pada bar tajuk penyemak imbas.
- “ url ” menunjukkan URL yang diganti sebagai entri baharu.
Contoh
Dalam fail HTML, buat empat butang yang memanggil ' modifyUrl() ” fungsi pada butang klik:
< butang onclick = 'modifyUrl('Tutorial CSS', 'CSSTutorial.html');' > 2 butang >
< butang onclick = 'modifyUrl('Tutorial JavaScript', 'JavaScriptTutorial.html');' > 3 butang >
< butang onclick = 'modifyUrl('Tutorial Java', 'JavaTutorial.html');' > 4 butang >
Tentukan fungsi ' modifyUrl() ” dalam fail JavaScript yang akan mencetuskan pada klik butang. Ia memerlukan dua parameter, ' tajuk ' dan juga ' url ”. Apabila kaedah dipanggil pada klik butang, 'tajuk' dan 'url' akan diluluskan sebagai hujah. Semak jenis ' pushState 'daripada objek sejarah, jika ia bukan' tidak ditentukan ”. Kemudian, panggil ' history.pushState() ” kaedah untuk menukar URL:
fungsi modifyUrl ( tajuk , url ) {
jika ( jenis ( sejarah. pushState ) != 'tidak ditentukan' ) {
adalah obj = {
Tajuk : tajuk ,
Url : url
} ;
sejarah. pushState ( obj , obj. Tajuk , obj. Url ) ;
}
}
Ia boleh dilihat bahawa pada setiap klik butang, URL akan berjaya ditukar tanpa memuatkan semula halaman:
Dalam output di atas, anda boleh melihat bahawa butang anak panah belakang di sebelah kiri atas ( <- ) didayakan semasa mengklik pada butang, ini menunjukkan bahawa anda boleh menavigasi ke sana ke mari kerana ' pushState() ” kaedah menambah URL baharu pada timbunan sejarah.
Kaedah 2: Ubah suai URL dalam JavaScript Tanpa Memuat Semula Halaman Menggunakan Kaedah 'replaceState()'
Menggunakan ' replaceState() ” kaedah untuk mengubah suai URL tanpa memuat semula halaman web. Ia juga merupakan ciri ' Objek sejarah ” tetapi ia tidak akan menambah entri baharu pada timbunan sejarah. Ia mengubah keadaan sedia ada sejarah penyemak imbas dan menggantikannya dengan keadaan baharu. Dengan menggunakan pendekatan ini, anda tidak boleh bertukar-tukar antara halaman.
Sintaks
Sintaks yang diberikan digunakan untuk kaedah 'replaceState()':
Contoh
Dalam fungsi yang ditentukan, panggil ' replaceState() ” kaedah untuk menggantikan URL pada klik butang tanpa memuat semula atau menavigasi halaman:
jika ( jenis ( sejarah. menggantikanNegeri ) != 'tidak ditentukan' ) {
adalah obj = {
Tajuk : tajuk ,
Url : url
} ;
sejarah. menggantikanNegeri ( obj , obj. Tajuk , obj. Url ) ;
}
}
Output menunjukkan bahawa pada setiap klik butang, URL telah ditukar dan tiada pilihan untuk menavigasi untuk kembali kerana butang anak panah belakang dilumpuhkan:
Kami telah menyediakan semua maklumat penting yang berkaitan dengan pengubahsuaian URL tanpa memuatkan semula halaman dalam JavaScript.
Kesimpulan
Untuk mengubah suai/menukar URL tanpa memuat semula halaman web, gunakan “ pushState() ' kaedah atau ' replaceState() ” kaedah. Kaedah “pushState()” menambah URL baharu sebagai entri baharu dalam timbunan sejarah dan membolehkan pengguna menavigasi ke sana ke mari. Manakala kaedah “replaceState()” menggantikan URL dan tidak membenarkan pemindahan ke halaman belakang. Artikel ini menerangkan kaedah untuk mengubah suai URL tanpa memuat semula halaman web menggunakan JavaScript.