Cara menggunakan window.location.href in javascript

Dalam pemrograman web diperlukan sebuah fungsi untuk redirect ke halaman lain. Yang dimaksud redirect adalah mengalihkan suatu halaman web ke halaman yang lainnya. Fungsinya seperti ini nih, coba anda buka link ini http://h2.ripway.com/binttackxx/contohRedirect.html, apa yang terbuka? anda malah akan dibawa ke halaman http://blajar-komputer.blogspot.com/. Seperti itulah salah satu kegunaan dari fungsi redirect ini.

Table of Contents Show

Struktur Dasar URL
Cara Redirect ke Halaman Lain dengan Vanilla JavaScript
1. window.location.replace()
2. window.location.assign()
3. window.location.href
4. document.location.href
5. top.location
6. self.location
7. this.location
Cara Redirect ke Halaman Lain dengan jQuery
1. $(location).attr()
2. $(window).attr()
3. $(location).prop()

Langsung saja ke tutorial cara membuat halaman redirect ini:

Ada banyak cara untuk membuat suatu halaman menjadi teralihkan ke halaman lain. Kali ini saya ingin memberikan cara rediret menggunakan HTML, Javascript, dan juga PHP. Hasil dari halaman yang dibuat dengan PHP, HTML ataupun Javascript akan sama, hanya saja penulisan source codenya yang berbeda.

Oke, langsung saja yang pertama, berikut adalah cara redirect menggunakan HTML:

langsung saja tuliskan kode seperti itu dihalaman anda, peletakannya sebelum tag <body>. Angka 0 yang dimaksud pada source code tersebut adalah lamanya halaman tersebut dibuka, jika diisi 5 maka halaman tersebut baru teralihkan setelah 5 detik. dan http://blajar-komputer.blogspot.com/ adalah halaman tujuan.

Berikutnya adalah cara redirect menggunakan Javascript:

window.location.href="http://blajar-komputer.blogspot.com/"

Penggunaannya dapat disesuaikan dimanapun pada halaman web. Jika anda ingin halaman tersebut langsung teralihkan pasang saja pada tag body, contohnya:

<html>

</body>

</html>

Dan yang terakhir menggunakan kode PHP:

<?php

Namun jika anda menggunakan script PHP ini anda tidak boleh meletakan kode html yang dapat menampilkan sesuatu pada browser. Untuk amannya anda letakan saja kode ini di baris pertama pada source code.

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.