Change URL in address bar after click on DOM element with javascript/jquery

Question

is there any way to change the URL in browser without reloading page after click a DOM element?

    $('#filter_form').on('change', function () {
        $.ajax(options);
        //change the browser URL
    });

Ex:

Before: http://somepage.com/filters

After: http://somepage.com/filters?type=apartment

Answer 1

Yes, this is possible with the history API . Both history.pushState and history.replaceState let you specify a new URL, eg:

history.pushState(null, null, "filters?type=apartment");

The URL is resolved in the usual way.

Browser support is good , other than IE9 and earlier.