Artikel ini akan menjelaskan metode untuk mengubah URL tanpa memuat ulang halaman web menggunakan JavaScript.
Bagaimana Cara Memodifikasi/Mengubah URL di JavaScript Tanpa Memuat Ulang Halaman?
Untuk memodifikasi URL tanpa memuat ulang halaman web, gunakan metode standar JavaScript berikut:
Metode 1: Ubah URL dalam JavaScript Tanpa Memuat Ulang Halaman Menggunakan Metode “pushState()”.
Untuk mengubah URL tanpa memuat ulang halaman web, gunakan tombol “ pushState() ' metode. Ini adalah fitur atau metode yang telah ditentukan sebelumnya dari ' objek sejarah ” yang memungkinkan mengubah riwayat browser tanpa menavigasi atau menyegarkan halaman. Itu hanya menambah atau memodifikasi tumpukan riwayat dan tidak memuat halaman baru. Dengan menggunakan pendekatan ini, Anda dapat beralih bolak-balik antar halaman dengan menambahkan entri baru ke tumpukan riwayat browser.
Sintaksis
Ikuti sintaks yang diberikan untuk metode “pushState()”:
jendela. sejarah . pushState ( negara , judul , url ) ;
Di Sini:
- “ negara ” mewakili entri riwayat baru.
- “ judul ” adalah teks khusus yang dapat ditampilkan di bilah judul browser.
- “ url ” menunjukkan URL yang diganti sebagai entri baru.
Contoh
Dalam file HTML, buat empat tombol yang memanggil ' ubahUrl() ” berfungsi pada klik tombol:
< klik tombol = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 tombol >
< klik tombol = 'modifyUrl('Tutorial JavaScript', 'Tutorial JavaScript.html');' > 3 tombol >
< klik tombol = 'modifyUrl('Tutorial Java', 'JavaTutorial.html');' > 4 tombol >
Tentukan fungsi “ ubahUrl() ” dalam file JavaScript yang akan dipicu saat tombol diklik. Dibutuhkan dua parameter, “ judul ” dan “ url ”. Saat metode dipanggil dengan klik tombol, 'judul' dan 'url' akan diteruskan sebagai argumen. Periksa jenis ' pushState ' dari objek sejarah, jika bukan ' belum diartikan ”. Kemudian, panggil ' sejarah.pushState() ” metode untuk mengubah URL:
fungsi ubahUrl ( judul , url ) {
jika ( jenis ( sejarah. pushState ) != 'belum diartikan' ) {
dulu obj = {
Judul : judul ,
Url : url
} ;
sejarah. pushState ( obj , obj. Judul , obj. Url ) ;
}
}
Dapat dilihat bahwa pada setiap klik tombol, URL akan berhasil diubah tanpa memuat ulang halaman:
Pada output di atas, Anda dapat melihat tombol panah kembali di kiri atas ( <- ) diaktifkan saat mengklik tombol, ini menunjukkan bahwa Anda dapat menavigasi bolak-balik karena “ pushState() ” metode menambahkan URL baru pada tumpukan riwayat.
Metode 2: Ubah URL dalam JavaScript Tanpa Memuat Ulang Halaman Menggunakan Metode “replaceState()”.
Menggunakan ' replaceState() ” metode untuk memodifikasi URL tanpa memuat ulang halaman web. Ini juga merupakan fitur dari ' objek sejarah ” tetapi itu tidak akan menambahkan entri baru ke tumpukan riwayat. Itu mengubah status riwayat browser yang ada dan menggantinya dengan status baru. Dengan menggunakan pendekatan ini, Anda tidak dapat beralih antar halaman.
Sintaksis
Sintaks yang diberikan digunakan untuk metode “replaceState()”:
Contoh
Dalam fungsi yang ditentukan, panggil ' replaceState() ” metode untuk mengganti URL pada klik tombol tanpa memuat ulang atau menavigasi halaman:
jika ( jenis ( sejarah. replaceState ) != 'belum diartikan' ) {
dulu obj = {
Judul : judul ,
Url : url
} ;
sejarah. replaceState ( obj , obj. Judul , obj. Url ) ;
}
}
Output menunjukkan bahwa pada setiap klik tombol, URL telah diubah dan tidak ada opsi untuk menavigasi kembali karena tombol panah kembali dinonaktifkan:
Kami telah menyediakan semua informasi penting yang relevan dengan modifikasi URL tanpa memuat ulang halaman dalam JavaScript.
Kesimpulan
Untuk memodifikasi/mengubah URL tanpa me-refresh halaman web, gunakan tombol “ pushState() metode ” atau “ replaceState() ' metode. Metode “pushState()” menambahkan URL baru sebagai entri baru dalam tumpukan riwayat dan memungkinkan pengguna untuk menavigasi bolak-balik. Sedangkan metode “replaceState()” menggantikan URL dan tidak mengizinkan pindah ke halaman belakang. Artikel ini menjelaskan metode untuk memodifikasi URL tanpa memuat ulang halaman web menggunakan JavaScript.