Skip to content Skip to sidebar Skip to footer

Memahami Penggunaan Window Location (Redirect) Pada Javascript

Memahami Penggunaan Window Location (Redirect) Pada Javascript
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"

  1. 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

    ReplyDelete
    Replies
    1. Kalo untuk redirect domain, saya rasa ada pada settingannya gan. Dan untuk menggunakan script window location ini, bisa kok tanpa menggunakan onclick seperti popup box yang sudah saya bahas pada artikel sebelumnya.

      jika kurang jelas atau ada yang ingin ditanyakan lagi, silahkan kirim pesan pada halaman kontak kami.

      Delete
    2. Wahh iya nih, saya juga sedang mencari tutorial untuk redirect sub domain blog yang non www.. Soalnya kalo diakses tanpa www jadi error gitu. Kalo untuk dipengaturannya hanya berlaku untuk domain utama saja, kalo sub domain diatur di pengaturan blognya, nanti malah domain utamanya ke redirect ke sub domain hha

      Delete