Sign in Subscribe
Javascript

Mengambil dan Mengubah URL Halaman Secara Dinamis dengan Href Location

Mengambil dan Mengubah URL Halaman Secara Dinamis dengan Href Location
Photo by Richy Great / Unsplash

Dalam pengembangan web, sering kali kita perlu mengambil atau mengubah URL halaman secara dinamis. Misalnya, kita ingin mengalihkan pengguna ke halaman lain, menampilkan URL saat ini, atau mengubah URL tanpa memuat ulang halaman. Untuk melakukan ini, kita bisa menggunakan location.href dalam JavaScript.

location.href adalah salah satu properti dalam objek window.location yang memungkinkan kita untuk mengakses, mengubah, dan mengarahkan pengguna ke URL tertentu. Dengan pemahaman yang tepat, kita bisa memanfaatkan href location untuk meningkatkan pengalaman pengguna dan mengontrol navigasi dalam aplikasi web.

Di artikel ini, kita akan membahas cara mengambil dan mengubah URL menggunakan location.href, serta contoh penggunaannya dalam pengembangan web.

Apa Itu Href Location?

location.href adalah properti dalam objek location yang mengembalikan URL lengkap dari halaman yang sedang diakses. Kita bisa menggunakannya untuk membaca URL saat ini atau mengubah URL secara dinamis.

Cara Mengambil URL Saat Ini

Jika kita ingin mendapatkan URL halaman yang sedang diakses oleh pengguna, kita bisa menggunakan kode berikut:

console.log(location.href);

Jika pengguna membuka halaman https://example.com/page.html, output yang dihasilkan adalah:

https://example.com/page.html

Cara Mengubah URL dengan location.href

Selain membaca URL, kita juga bisa mengubah URL halaman dengan menetapkan nilai baru ke location.href. Ini berfungsi seperti redirect, karena browser akan memuat halaman baru dengan URL yang diberikan.

1. Redirect ke Halaman Lain

location.href = "https://example.com/new-page.html";

Kode di atas akan langsung mengarahkan pengguna ke new-page.html.

2. Redirect dengan Tombol

Kita bisa membuat tombol yang mengubah URL saat diklik:

<button onclick="window.location.href='https://example.com/dashboard'">Pergi ke Dashboard</button>

Saat tombol diklik, pengguna akan diarahkan ke halaman dashboard.

Menggunakan location.href untuk Navigasi Halaman Tanpa Reload

Kadang kita ingin mengubah URL tanpa memuat ulang halaman. Ini bisa dilakukan dengan history.pushState() jika kita menggunakan Single Page Application (SPA), tetapi location.href sendiri akan selalu memicu reload.

Jika ingin mengubah URL tanpa reload, gunakan:

history.pushState(null, "", "/new-url");

Kode ini akan mengubah URL di address bar menjadi /new-url, tetapi tidak akan me-reload halaman.

Perbedaan location.href dengan window.location.assign() dan window.location.replace()

Metode Fungsi Reload Halaman?
location.href Mengubah URL dan mengarahkan pengguna ✅ Ya
location.assign() Sama seperti location.href, tetapi dalam bentuk metode ✅ Ya
location.replace() Mengganti URL tanpa menyimpan riwayat halaman sebelumnya ✅ Ya

Jika kita ingin mengganti halaman tanpa menyimpan riwayat, gunakan:

location.replace("https://example.com/home");

Dengan replace(), pengguna tidak bisa kembali ke halaman sebelumnya dengan tombol back di browser.

Contoh Implementasi location.href

1. Menampilkan URL Saat Ini dalam Halaman

Kita bisa menampilkan URL aktif ke dalam halaman agar pengguna tahu mereka sedang berada di halaman mana.

<p>URL saat ini: <span id="current-url"></span></p>
<script>
    document.getElementById("current-url").textContent = location.href;
</script>

Hasilnya akan menampilkan URL penuh yang sedang diakses pengguna.

2. Redirect Otomatis Setelah Beberapa Detik

Kita bisa mengarahkan pengguna ke halaman lain setelah beberapa detik menggunakan setTimeout():

setTimeout(function() {
    location.href = "https://example.com/new-page";
}, 5000); // Redirect setelah 5 detik

Setelah 5 detik, pengguna akan dialihkan ke new-page.

3. Mengubah URL dengan Query Parameter Secara Dinamis

Jika kita ingin menambahkan atau mengubah query parameter dalam URL:

let url = new URL(location.href);
url.searchParams.set("user", "john");
location.href = url.toString();

Jika sebelumnya URL adalah:

https://example.com/

Setelah kode dijalankan, akan berubah menjadi:

https://example.com/?user=john

Kapan Harus Menggunakan location.href?

✅ Jika ingin mengarahkan pengguna ke halaman lain dengan redirect otomatis.
✅ Jika ingin membaca URL saat ini dalam halaman.
✅ Jika ingin menampilkan atau memodifikasi URL dengan query parameter secara dinamis.
❌ Jangan gunakan jika ingin mengubah URL tanpa reload, gunakan history.pushState() sebagai gantinya.

Kesimpulan

  • location.href digunakan untuk mengambil dan mengubah URL halaman.
  • Dapat digunakan untuk redirect otomatis atau menampilkan URL saat ini dalam halaman.
  • Bisa digunakan bersama query parameter untuk navigasi dinamis.
  • Jika ingin mengganti halaman tanpa menyimpan riwayat, gunakan location.replace().
  • Jika ingin mengubah URL tanpa reload, gunakan history.pushState().

Dengan memahami href location, kita bisa mengontrol navigasi halaman web dengan lebih baik dan memberikan pengalaman pengguna yang lebih interaktif!

Read next