更改 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:57:59  来源:igfitidea点击:

change url without redirecting using javascript

javascriptjqueryajaxredirect

提问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 4574and 4981). It's all mixed up in there with the jQuery source, but these are the relevant lines of the annotated Backbone.Routersourcedocumentation page:

如果您想确切地知道它们使用什么,那就是Backbone.js(参见行45744981)。它与 jQuery 源代码混合在一起,但这些是带注释的Backbone.Router文档页面的相关行:

The support checks:

支持的检查

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

The routefunction:

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 链接。信息量很大。