Change url without redirect using javascript

Question

I would like to know how to change the URL without redirecting, as on this site http://dekho.com.pk/ads-in-lahore when we click on the tabs, url changes, but reloading the page completely reloads. There are still questions about stackoverflow indicating that this is not possible, but I would like to know how it implemented the above site. Thanks

Answer 1

use pushState :

 window.history.pushState("", "", '/newpage'); 

Answer 2

If you want to know exactly what they are using, Backbone.js (see lines 4574 and 4981 ). All this mixed up there with the jQuery source, but these are the corresponding lines of the annotated Backbone.Router page source :

supports checks :

  this._wantsPushState = !!this.options.pushState; this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState); 

route function:

 route: function(route, name, callback) { Backbone.history || (Backbone.history = new History); if (!_.isRegExp(route)) route = this._routeToRegExp(route); if (!callback) callback = this[name]; Backbone.history.route(route, _.bind(function(fragment) { var args = this._extractParameters(route, fragment); callback && callback.apply(this, args); this.trigger.apply(this, ['route:' + name].concat(args)); Backbone.history.trigger('route', this, name, args); }, this)); return this; }, 

Choosing between a hash and s state push :

 // Depending on whether we're using pushState or hashes, and whether // 'onhashchange' is supported, determine how we check the URL state. if (this._hasPushState) { Backbone.$(window).bind('popstate', this.checkUrl); } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) { Backbone.$(window).bind('hashchange', this.checkUrl); } else if (this._wantsHashChange) { this._checkUrlInterval = setInterval(this.checkUrl, this.interval); }​ 

More on what they’re up to:

 // If we've started off with a route from a `pushState`-enabled browser, // but we're currently in a browser that doesn't support it... if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) { this.fragment = this.getFragment(null, true); this.location.replace(this.root + this.location.search + '#' + this.fragment); // Return immediately as browser will do redirect to new url return true; // Or if we've started out with a hash-based route, but we're currently // in a browser where it could be `pushState`-based instead... } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) { this.fragment = this.getHash().replace(routeStripper, ''); this.history.replaceState({}, document.title, this.root + this.fragment); } if (!this.options.silent) return this.loadUrl(); 

And coup 'd grace :

 // If pushState is available, we use it to set the fragment as a real URL. if (this._hasPushState) { this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url); } 

You should read the annotated Backbone.js link that I provided at the top. Very informative.