Memahami Penggunaan Window Location (Redirect) Pada Javascript

By Elang Hardifal 22 Feb, 2020 3 comments

Ketika berada pada sebuah halaman web dan ingin beralih kehalaman lain, kita dapat memanfaatkan window location pada javascript. Perintah window location ini sangat berguna untuk membuka halaman lainnya dalam javascript.

Mengenal Window Location Pada Javascript

1. Window.location.href

Berfungsi untuk mendapatkan url dan juga bisa untuk mengalihkan ke halaman lain dari halaman saat ini, dengan cara penulisan window.location.href ="alamat/url".

Agar lebih mudah dipahami, berikut contoh cara penggunaan window.location.href dalam javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick ="beralih()">Redirect</button>

<script>
 function beralih(){
  window.location.href = "https://hardifal.com";
 }
</script>


</body>
</html>

Hasil :

Gambar Gif Contoh penggunaan window location href dalam javascript

2. Window.location.hostname

Fungsi ini digunakan untuk mendapatkan atau menampilkna nama domain halaman web yang sedang di akses saat ini.

Contoh program window.location.hostname pada javascript :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick ="beralih()">Klik disini</button>
 <p id="demo">nama domain</p>

<script>
 function beralih(){
  document.getElementById("demo").innerHTML = (window.location.hostname);
 }
</script>


</body>
</html>

Untuk demo / hasilnya silahkan coba jalankan program diatas. Atau klik disini.

3. Window.location.assign

Window.location.assign() berfungsi untuk mengarahkan halaman saat ini ke halaman lain. Sama seperti window.location.href = ""

Cara penggunaan window.location.assign dalam javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick ="beralih()">Redirect ke Hardifal.com</button>

<script>
 function beralih(){
  document.getElementById("demo").innerHTML = (window.location.assign("https://www.hardifal.com"));
 }
</script>


</body>
</html>

Hasil :

Gambar Gif Cara penggunaan window.location.assign() pada javascript

4. Window.location.pathname

window.location.pathname pada javascript berfungsi untuk mendapatkan path dan nama file alamat web atau folder saat ini.

Contoh penggunaan window.location.pathname dalam javascript sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick ="beralih()">Klik disini</button>
 <h1 id="demo">akan tampil disini</h1>

<script>
 function beralih(){
  document.getElementById("demo").innerHTML = (window.location.pathname);
 }
</script>

</body>
</html>

Hasil :

Gambar Gif penggunaan window.location.pathname dalam javascript

5. Window.location.protocol

Yaitu berfungsi unutk mendapatkan atau mengetahui protokol dari sebuah web yang sedang diakses saat ini apakah menggunakan (http: atau https:)

Contoh penggunaan window.location.protocol dalam javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick ="beralih()">Redirect ke Hardifal.com</button>
 <p id="demo">Tampilkan disini</p>
<script>
 function beralih(){
  document.getElementById("demo").innerHTML = window.location.protocol;
 
}
</script>

</body>
</html>

Untuk hasil/demonya silahkan jalanka pada web anda atau klik disini untuk melihat demo penggunaan window.location.protocol.

Baca juga : Memahami cara penggunaan popup box di javascript

3 comments for "Memahami Penggunaan Window Location (Redirect) Pada Javascript"

maskriseo24 February 2020 at 00:54
Kalo untuk pengalihan blog dari non www ke www apakah bisa menggunakan script ini, dan jika tanpa harus onclick bisa nda ya? Jadi saat pengguna mengakses example.com akan otomatis redirect ke www.example.com, soalnya saya menggunakan sub domain... Terima kasih