thay đổi url mà không chuyển hướng bằng cách sử dụng javascript

Question

Tôi muốn biết cách thay đổi url mà không cần chuyển hướng như trên trang web này http://dekho.com.pk/ads-in-lahore khi chúng tôi nhấp vào các tab thay đổi url nhưng tải lại trang hoàn toàn. Có những câu hỏi khác trên stackoverflow chỉ ra rằng nó là không thể nhưng tôi muốn biết làm thế nào các trang web đã đề cập ở trên đã thực hiện nó. Cảm ơn

Answer 1

sử dụng pushState:

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

Answer 2

Nếu bạn muốn biết chính xác những gì họ sử dụng, đó là Backbone.js (xem dòng 4574 và 4981). Đó là tất cả trộn lẫn trong đó với nguồn jQuery, nhưng đây là những dòng có liên quan của trang annotated Backbone.Router source tài liệu:

Các support checks:

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

Các route chức năng:

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

Lựa chọn giữa hash and push state 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); 
}​ 

Thông tin thêm về những gì họ đang lên đến:

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

Và 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); 
} 

Bạn nên đọc Backbone.js chú thích liên kết tôi cung cấp ở đầu trang. Rất thông tin.