Sign in Subscribe
Javascript

Mengetahui Domain dari URL Menggunakan Host Location

Mengetahui Domain dari URL Menggunakan Host Location
Photo by Markus Winkler / Unsplash

Ketika mengembangkan aplikasi berbasis web, sering kali kita perlu mengetahui domain dari URL saat ini untuk keperluan validasi, redirection, atau pengaturan konfigurasi berdasarkan lingkungan (development, staging, atau production). Dalam JavaScript, kita bisa menggunakan location.host atau location.hostname untuk mendapatkan informasi domain dengan mudah.

Dalam artikel ini, kita akan membahas cara mengakses domain dari URL menggunakan Host Location, perbedaannya dengan properti lain di objek location, serta beberapa contoh penggunaannya dalam proyek web.

Apa Itu Host Location?

location.host adalah properti dalam JavaScript yang mengembalikan nama domain beserta port dari URL yang sedang diakses.

Contoh jika kita membuka halaman di browser dengan URL:

https://example.com:8080/page.html

Maka jika kita menjalankan kode berikut di konsol browser:

console.log(location.host);

Outputnya akan menjadi:

example.com:8080

Sedangkan jika kita hanya ingin mendapatkan nama domain tanpa port, kita bisa menggunakan location.hostname:

console.log(location.hostname);

Outputnya:

example.com

Perbedaan location.host dan location.hostname

Properti Output Termasuk Port?
location.host example.com:8080 ✅ Ya
location.hostname example.com ❌ Tidak

Jadi, jika website menggunakan port selain 80 (HTTP) atau 443 (HTTPS), location.host akan mengembalikan domain + port, sementara location.hostname hanya mengembalikan nama domain saja.

Cara Menggunakan Host Location dalam JavaScript

1. Menampilkan Domain di Halaman

Kita bisa menampilkan domain yang sedang digunakan langsung di dalam halaman web:

<p>Domain saat ini: <span id="domain"></span></p>
<script>
    document.getElementById("domain").textContent = location.hostname;
</script>

Jika pengguna mengakses halaman ini dari https://mywebsite.com, teks dalam paragraf akan menjadi:

Domain saat ini: mywebsite.com

2. Redirect Berdasarkan Domain

Dalam beberapa kasus, kita ingin mengarahkan pengguna ke domain tertentu berdasarkan domain yang sedang mereka gunakan.

if (location.hostname === "staging.mywebsite.com") {
    location.href = "https://production.mywebsite.com";
}

Jika pengguna mengakses staging.mywebsite.com, mereka akan dialihkan ke domain production secara otomatis.

3. Menyesuaikan Konfigurasi Berdasarkan Domain

Jika kita memiliki berbagai lingkungan (development, staging, production), kita bisa menggunakan location.hostname untuk mengatur konfigurasi yang berbeda:

let apiURL;
if (location.hostname === "localhost") {
    apiURL = "http://localhost:3000/api";
} else if (location.hostname === "staging.mywebsite.com") {
    apiURL = "https://staging-api.mywebsite.com";
} else {
    apiURL = "https://api.mywebsite.com";
}
console.log("Base API URL: ", apiURL);

Kode ini memastikan bahwa aplikasi menggunakan API yang sesuai berdasarkan domain yang digunakan.

Kapan Harus Menggunakan Host Location?

✅ Jika ingin menampilkan domain saat ini dalam halaman web.
✅ Jika ingin mengalihkan pengguna ke domain tertentu berdasarkan lingkungan aplikasi.
✅ Jika ingin menyesuaikan konfigurasi aplikasi berdasarkan domain yang sedang digunakan.
❌ Jangan gunakan jika ingin mendapatkan jalur atau parameter dari URL, karena location.host hanya mengembalikan domain dan port.

Kesimpulan

  • location.host digunakan untuk mendapatkan domain + port dalam URL.
  • location.hostname hanya mengembalikan nama domain tanpa port.
  • Berguna untuk redirect, konfigurasi lingkungan, dan menampilkan domain di halaman.
  • Tidak dapat digunakan untuk mendapatkan path atau query string dari URL.

Dengan memahami cara kerja Host Location, kita bisa membuat aplikasi web yang lebih fleksibel dan dinamis, sesuai dengan kebutuhan lingkungan yang sedang berjalan!

Read next