Cara mengganti URL browser tanpa reload menggunakan javascript

Ada banyak cara untuk mengganti URL browser tanpa mereload browser kita. Tetapi pada artikel kali ini saya akan memberi salah satu contoh untuk mengganti URL browser tanpa mereload kembali browser kita menggunakan API history browser kita untuk mengubah URL.

Javascript History API

API history browser adalah riwayat browser yang telah kita kunjungi atau tampilkan pada browser kita sebelumnya, dan kita dapat menggunakan history web kita untuk di manipulasi. Sehingga, kita dapat kembali atau maju ke page selanjutnya dengan hanya menekan tombol.

“window.history.pushState”

Kita dapat menggunakan metode ini untuk mendorong entri baru ke dalam riwayat browser. Tidak perlu di-refresh dan akan menampilkan URL baru di browser.

“window.history.pushState” memiliki 3 argumen, yaitu:

state: Objek detail URL.

title: Judul URL(biasanya dalam tag<title> pada html).

url: URL yang anda lihat pada browser anda.

window.history.pushState('NewPage', 'Title', '/new-page');

Anda dapat mencoba ini langsung dengan menyalin kode di atas & membuka konsol dan menempelkan kode ini di atas mereka. Anda akan melihat hasilnya sendiri.

Untuk membuatnya Dinamis, Anda dapat membuatnya dengan mudah menggunakan fungsi.

function processAjaxData(response, url){
      document.getElementById("content").innerHTML = response.html;
      document.title = response.Title;
           window.history.pushState({
                 "html":response.html,
                 "Title":response.Title},"", url);
    
}

Kode di atas akan mengambil dua parameter secara dinamis & Anda dapat memanipulasinya sesuai dengan penggunaan anda.

Sekian, Terima kasih.