更改 url 而不使用 javascript 重定向
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12446317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change url without redirecting using javascript
提问by kb858
I would like to know how to change the url without redirecting like on this website http://dekho.com.pk/ads-in-lahorewhen 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
我想知道如何在不重定向的情况下更改 url,就像在这个网站http://dekho.com.pk/ads-in-lahore当我们点击标签时,url 会更改,但页面不会完全重新加载。stackoverflow 上还有其他问题表明这是不可能的,但我想知道上述网站是如何实现的。谢谢
回答by Mihai Iorga
use pushState
:
使用pushState
:
window.history.pushState("", "", '/newpage');
回答by Jared Farrish
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
sourcedocumentation page:
如果您想确切地知道它们使用什么,那就是Backbone.js(参见行4574
和4981
)。它与 jQuery 源代码混合在一起,但这些是带注释的Backbone.Router
源文档页面的相关行:
The support checks:
在支持的检查:
this._wantsPushState = !!this.options.pushState;
this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState);
The route
function:
该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;
},
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.
您应该阅读我在顶部提供的带注释的 Backbone.js 链接。信息量很大。