Cara Mengambil URL Halaman Saat Ini dengan JavaScript

Mengetahui URL halaman yang sedang dibuka berguna untuk membuat tombol berbagi, menandai menu yang sedang aktif, atau mengambil parameter dari URL. Artikel ini membahas cara mengambil URL saat ini di JavaScript.

Objek window.location

<script>
console.log(window.location.href);     // URL lengkap
console.log(window.location.hostname); // domain
console.log(window.location.pathname); // path
console.log(window.location.search);   // ?id=5
</script>

Contoh Kasus: Mengambil Parameter dari URL

Untuk halaman seperti produk.html?id=42, ambil nilai id dengan URLSearchParams:

<script>
const params = new URLSearchParams(window.location.search);
const id = params.get("id");
console.log(id); // "42"
</script>

Contoh Kasus: Menandai Menu Aktif

<script>
const path = window.location.pathname;
document.querySelectorAll("nav a").forEach(function(link) {
    if (link.getAttribute("href") === path) {
        link.classList.add("aktif");
    }
});
</script>

Contoh Kasus: Tombol Bagikan

<script>
const bagikan = "https://wa.me/?text=" + encodeURIComponent(window.location.href);
</script>

Kesimpulan

Gunakan window.location untuk mengakses URL saat ini. Manfaatkan URLSearchParams untuk membaca parameter, pathname untuk menandai menu aktif, dan encodeURIComponent() saat menyisipkan URL ke tautan lain.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

• Cara Memeriksa Variabel Undefined di JavaScript
• Cara Memeriksa Apakah Variabel Berupa Array di JavaScript
• Cara Melakukan Perulangan Array di JavaScript