【问题标题】:change url without redirecting using javascript [duplicate]更改网址而不使用javascript重定向[重复]
【发布时间】:2012-09-08 21:43:45
【问题描述】:

我想知道如何在不重定向的情况下更改 url,就像在这个网站上 http://dekho.com.pk/ads-in-lahore 当我们单击选项卡时,url 会发生变化,但页面会完全重新加载。 stackoverflow 上还有其他问题表明这是不可能的,但我想知道上述网站是如何实现它的。 谢谢

【问题讨论】:

  • 在您提到的链接上,调用了相同的 Web 服务,但参数不同。
  • history.pushState()。那里也有 jQuery,但必须要有那种特殊的技术。旧版浏览器的推送状态。
  • 也可以使用window.location.hash修改url.com/page#hash
  • History.js 似乎是对pushState 技术的相当全面的理解。请参阅demos

标签: javascript jquery ajax redirect


【解决方案1】:

如果你想确切地知道他们在使用什么,那就是 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 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);
}​

更多关于他们在做什么:

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

【讨论】:

  • 感谢您的回答。它提供了很多信息。我还不知道骨干,所以我选择 pushstate,因为它可以满足我的所有需求。
  • Backbone.js 是围绕它的路由器构建的,因为它是一个“单页应用程序”。尽管您可能还没有足够的经验在我上面的回答中看到它,但这正是 Backbone.js 正在做的事情,并且具有优雅的降级(对于那些没有支持它的浏览器的人) .在您的问题下的评论中查看我的链接;我会使用像github.com/balupton/History.js 这样的库,而不是你自己的。除非你知道自己在做什么。
  • 我正在使用 History.js,因为我是新手 :)
【解决方案2】:

使用pushState:

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

【讨论】:

猜你喜欢
  • 2013-11-09
  • 1970-01-01
  • 2010-12-02
  • 1970-01-01
  • 2011-09-22
  • 1970-01-01
  • 1970-01-01
  • 2010-11-21
相关资源
最近更新 更多