jquery - endre URL uten å omdirigere ved å bruke javascript

Jeg vil gjerne vite hvordan man kan endre URL-en uten å omdirigere, som på denne nettsiden http://dekho.com.pk/ads-in-lahore. Når vi klikker på faner, endres URL-en, men siden lastes ikke helt på nytt. Det finnes andre spørsmål på Stack Overflow som indikerer at det ikke er mulig, men jeg vil gjerne vite hvordan den nevnte nettsiden har implementert det. Takk

Svar #1

bruk pushState:

window.history.pushState(data, title, url);

LE: siden moderne nettlesere har endret oppførsel, bruk replaceState i stedet:

window.history.replaceState(data, title, url);

Svar #2

Hvis du vil vite nøyaktig hva de bruker, er det Backbone.js (se linjene 4574 og 4981). Det er alt blandet sammen der med jQuery-kilden, men dette er de relevante linjene fra den annoterte Backbone.Router-kildedokumentasjonssiden:

Støttekontrollene:

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

Funksjonen 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;
},

Å velge mellom hash- og push-tilstander:

// 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);
}

Mer om hva de holder på med:

// 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();

Og dråpen som får begeret til å renne over:

// 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);
}

Du bør lese den annoterte Backbone.js-lenken jeg ga øverst. Veldig informativ.

Relaterte artikler