Cara Mudah Melakukan Redirect dengan Javascript

Rabu, 26 Agu 2020

Dalam website ataupun aplikasi mobile yang dibuat dengan HTML5+JavaScript tentunya anda berurusan dengan beberapa halaman. Semakin kompleks website ataupun aplikasi, maka jumlah halaman bisa menjadi banyak. Untuk mengatur lalu lintas pengunjung dalam mengakses halaman tersebut, terkadang diperlukan pengalihan halaman atau redirect. 

Redirect Adalah?

Redirect merupakan cara untuk mengarahkan pengunjung ke url yang anda inginkan. Misalnya pengunjung mengetik suatu alamat URL yang tidak ada pada website anda, maka anda arahkan ke halaman website tertentu yang menampilkan informasi "halaman yang sedang anda cari, tidak ada" atau bisa juga anda arahkan ke index.html.

Cara Redirect Javascript


Perlu diketahui tentang Redirect

Search Engine seringkali mempermasalahkan apabila anda melakukan pengalihan halaman atau redirect. Tetapi anda dapat mengatasinya dengan melakukan redirect 301. Penjelasan lengkapnya ada di artikel Menggunakan Redirect 301.

Cara Redirect dengan Javascript

Ada banyak cara melakukan redirect masing-masing memiliki perbedaan tapi kesamaannya adalah semua bisa pindah halaman. Bila anda menggunakan JavaScript maka anda dapat menggunakan salah satu dari cara yang umum digunakan berikut:

Redirect dengan location

window.location.replace("https://inkonstellasi.blogspot.com");

atau 

window.location.assign("https://inkonstellasi.blogspot.com");

bisa juga dengan

window.location.href="https://inkonstellasi.blogspot.com";


**note: Anda perlu mengganti alamat dalam kurung diatas ke alamat http yang anda inginkan. 

Kesamaan dan Perbedaan Redirect menggunakan location

Ketiga cara diatas sama-sama dapat mengarahkan url ke url tujuan, tetapi ketiganya berbeda dalam menangani session history. Bila anda tidak menginginkan pengguna menyimpan history informasi dari halaman sebelumnya maka disarankan menggunakan window.location.replace. Tetapi bila anda menginginkan user dapat kembali dengan menggunakan fasilitas back di browser maka anda dapat menggunakan location.href.


Selain cara location diatas anda dapat memanfaatkan history untuk kembali ke halaman sebelumnya

contoh:

window.history.back();

window.history.go(-1);


Bila anda menggunakan Jquery anda juga dapat menggunakan cara berikut ini:

$(location).attr("href","https://inkonstellasi.blogspot.com");

$(window).attr("location","https://inkonstellasi.blogspot.com");

$(location).prop("href","https://inkonstellasi.blogspot.com");


Silahkan menggunakan salah satu atau beberapa cara diatas sesuai kebutuhan. Demikian tulisan kali ini, semoga bermanfaat.


logoblog

1 komentar: