Je voudrais savoir comment changer l'URL sans rediriger comme sur ce site http://dekho.com.pk/ads-in-lahore quand on clique sur les onglets l'url change mais la page dosent recharger complètement. Il y a d'autres questions sur stackoverflow indiquant que ce n'est pas possible, mais j'aimerais savoir comment le site Web mentionné ci-dessus l'a mis en œuvre. Merci
utilisez pushState
:
window.history.pushState("", "", '/newpage');
Si vous voulez savoir exactement ce qu’ils utilisent, c’est Backbone.js (voir les lignes 4574
Et 4981
). Tout y est mêlé à la source jQuery, mais ce sont les lignes pertinentes de la source annotée Backbone.Router
page de documentation:
Le contrôles de support :
this._wantsPushState = !!this.options.pushState;
this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState);
La fonction route
:
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;
},
Choisir entre hachage et état Push s:
// 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);
}
Plus sur ce qu'ils préparent:
// 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();
Et le coup d grâce :
// 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);
}
Vous devriez lire le lien annoté Backbone.js que j’ai fourni en haut. Très informatif.