10 Cara Redirect ke Halaman Lain dengan JavaScript dan jQuery

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

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:

1. URL absolut, contoh:
   window.location.href='https://blog.kodejarwo.com/p/pencarian.html'
2. URL relatif, contoh:
   window.location.href='p/pencarian.html'
3. URL anchor, contoh:
   window.location.href='#top'
4. 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.