Kebingungan bagaimana cara untuk melakukan redirect dari satu halaman ke halaman lain dengan menggunakan pure JavaScript atau jQuery?
Sama, saya juga pernah mengalaminya.
Tapi tenang saja, JavaScript menyediakan banyak metode untuk mengambil dan mengubah URL yang sedang kita buka dengan kata lain melakukan redirect / pengalihan ke halaman lain. Jadi menurut saya, anda tidak perlu menggunakan jQuery untuk melakukan redirect, karena pakai vanilla JavaScript saja sudah cukup.
Sebelumnya, mari kita pelajari terlebih dahulu struktur dasar dari URL.
Struktur Dasar URL
<protocol>//<hostname>:<port>/<pathname><query><hash>
- Protocol : protokol adalah jenis protokol yang dipakai oleh halaman tersebut, bisa kita lihat dengan tulisan HTTP atau HTTPS
- Hostname : nama host dari halaman tersebut, misal www.kodejarwo.com
- Port : nomor port di server
- Pathname : seperti subdirektori yang ada di host, misal www.kodejarwo.com/search
- Query : string kueri yang mengikuti path, biasanya dipakai untuk halaman pencarian, misal www.kodejarwo.com/search?q={query value}
- Hash : bila diartikan ke dalam Bahasa Indonesia, hash artinya tanda pagar (#), yaitu sebuah anchor dari URl
Sekarang, kita lanjut ke cara melakukan redirect nya baik menggunakan JavaScript maupun jQuery.
Cara Redirect ke Halaman Lain dengan Vanilla JavaScript
1. window.location.replace()
Metode
replace()
bekerja dengan cara melakukan replace atau mengganti string dari sebuah value yang sudah kita pilih dengan string baru. Cara penggunaannya:window.location.replace('https://blog.kodejarwo.com')
Dari situ bisa kita lihat value
window.location
diganti string nya menjadi https://blog.kodejarwo.com
. Dengan kata lain, anda akan terkena redirect ke https://blog.kodejarwo.com
.2. window.location.assign()
Mirip seperti
replace()
, hanya saja ada sedikit perbedaan dengan assign()
.Pada
replace()
, ketika kita sudah terkena redirect, URL pada saat sebelum redirect tidak disimpan di dalam riwayat dokumen, sehingga anda tidak bisa menekan tombol "back" atau tombol kembali untuk kembali ke URL sebelum redirect.Sebaliknya,
assign()
akan menyimpan URL sebelum redirect ke riwayat dokumen sehingga anda bisa kembali dengan menekan tombol back. Penggunaannya:window.location.assign('https://blog.kodejarwo.com')
3. window.location.href
href
adalah cara lain dari kedua cara diatas. href
sendiri dapat dilakukan dengan 4 macam value:- URL absolut, contoh:
window.location.href='https://blog.kodejarwo.com/p/pencarian.html'
- URL relatif, contoh:
window.location.href='p/pencarian.html'
- URL anchor, contoh:
window.location.href='#top'
- Protokol baru, contoh:
location.href='file://host/path/example.txt'
4. document.location.href
Sama seperti
window.location.href
, hanya saja window diganti dengan document, yang berarti URL akan redirect ke sebuah dokumen yang ada pada hostname yang sama (path). Contoh:document.location.href = ''/p/pencarian.html'
5. top.location
top.location = 'https://blog.kodejarwo.com'
6. self.location
self.location = 'https://blog.kodejarwo.com'
7. this.location
Sama seperti
self.location
, hanya saja penggunaan this
pada sebuah function
akan menghasilkan konteks, sedangkan self
akan menghasilkan window.this.location = 'https://blog.kodejarwo.com'
Cara Redirect ke Halaman Lain dengan jQuery
1. $(location).attr()
$(location).attr('href','https://blog.kodejarwo.com')
2. $(window).attr()
$(window).attr('location','https://blog.kodejarwo.com')
3. $(location).prop()
$(location).prop('href', 'https://blog.kodejarwo.com')
Semua cara di atas bisa saya pastikan work untuk semua browser, karena ada kode yang tidak work untuk semua browser seperti
window.navigate
yang hanya work pada Internet Explorer 3.Saya sarankan anda tidak perlu menggunakan jQuery untuk melakukan redirect, karena hasilnya juga tetap - akan redirect juga. Bahkan kalau menggunakan jQuery, redirect hanya akan berfungsi bila jQuery sudah diload terlebih dahulu. Hal ini kurang cocok untuk redirect yang bersifat 304 dan 404.