2012-09-16 68 views
44

我想知道如何更改網址,而不會像本網站上重定向http://dekho.com.pk/ads-in-lahore 當我們點擊標籤URL更改,但頁面dosent完全重新加載。在stackoverflow上還有其他問題表明這是不可能的,但我想知道上面提到的網站是如何實現它的。 感謝更改網址,而無需使用javascript重定向

+0

在您提到的鏈接上,調用了相同的webservice,但參數不同。 –

+0

['history.pushState()'](https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history)。那裏也有jQuery,但是這個特定的技術已經成爲了。爲舊版瀏覽器推回狀態。 –

+0

您也可以使用window.location.hash並修改http://url.com/page#hash。 –

回答

113

使用pushState

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

參考鏈接瞭解更多詳情http://diveintohtml5.info/history.html –

+0

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

6

如果你想使用它們到底是什麼就知道了,它是Backbone.js的(見線45744981)。這一切都混合起來在那裏與jQuery的來源,但這些都是annotated Backbone.Router source文檔頁面的相關線路:

support checks

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

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

之間進行選擇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); 
}​ 

更多關於他們在做什麼:

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

而且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); 
} 

你應該閱讀註釋Backbone.js的鏈接我在上面提供。非常豐富。

+0

謝謝您的回答。它提供的信息非常豐富。我不知道骨幹,所以我要去推動它,因爲它滿足我所有的需求。 – kb858

+0

Backbone.js是圍繞它的路由器構建的,因爲它是一個「單頁應用程序」。雖然你可能還沒有足夠的經驗來看我在上面的回答,那就是* Backbone.js正在做的事情,以及優雅的退化(對於那些沒有支持它的瀏覽器的人)。在你的問題下查看我的鏈接我會使用像https://github.com/balupton/History.js/這樣的庫,而不是自己推出。除非你知道你在做什麼。 –

+0

我使用History.js,因爲我是一個新手:) – kb858

相關問題