change url without redirecting using javascript [duplicate]

Question

I would like to know how to change the url without redirecting like on this website http://dekho.com.pk/ads-in-lahore when we click on tabs the url changes but the page dosent reload completely. There are other questions on stackoverflow indicating that it is not possible but i would like to know how the above mentioned website have implemented it. Thanks

On the link you mentioned, same webservice is called but with different parameters. — Sushant Gupta
– Sushant Gupta, Commented Sep 16, 2012 at 11:01
history.pushState(). There's also jQuery in there, but that particular technique has got to be. push state with a fall back for older browsers. — Jared Farrish
– Jared Farrish, Commented Sep 16, 2012 at 11:01
You can also use window.location.hash and modify url.com/page#hash. — GG.
– GG., Commented Sep 16, 2012 at 11:07
History.js seems to be a fairly comprehensive take on the pushState technique. See the demos. — Jared Farrish
– Jared Farrish, Commented Sep 16, 2012 at 11:11

Mihai Iorga · Accepted Answer · 2022-12-14 18:00:26Z

244

use pushState:

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

LE: since modern browsers changed behaviour, use replaceState instead:

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

edited Dec 14, 2022 at 18:00

answered Sep 16, 2012 at 11:10

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Prathamesh Rasam Over a year ago

refer link for more details diveintohtml5.info/history.html

Martin Schneider Over a year ago

developer.mozilla.org/en-US/docs/Web/API/History_API

Pierre Over a year ago

window.history.replaceState(data, title, url); is also useful

Dexter Bengil Over a year ago

wow, this works like a charm!

Kevin Wheeler Over a year ago

What does LE stand for?

|

Jared Farrish · Accepted Answer · 2012-09-16 11:53:34Z

9

If you want to know exactly what they using, it's Backbone.js (see lines 4574 and 4981). It's all mixed up in there with the jQuery source, but these are the relevant lines of the annotated Backbone.Router source documentation page:

The support checks:

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

The 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 hash and push states:

// 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 the 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 I provided at the top. Very informative.

answered Sep 16, 2012 at 11:53

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

3 Comments

kb858 Over a year ago

Thank you for your answer.it was very informative. i dont know backbone yet so i am going for the pushstate as it fulfills all my needs.

Jared Farrish Over a year ago

Backbone.js is built around it's router, as it's a "single page app". Although you may not be experienced enough yet to see it in my answer above, that's exactly what Backbone.js is doing, as well has graceful degradation (for those who don't have browsers that support it). See my link in comment under your question; I'd use a library like github.com/balupton/History.js, not roll your own. Unless you know what you're doing.

kb858 Over a year ago

I am using History.js as i am a newb :)

Collectives™ on Stack Overflow

change url without redirecting using javascript [duplicate]

2 Answers 2

8 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Linked

Related