javascript - 你可以在不影响历史的情况下使用哈希导航吗?

我担心这可能是不可能的,但有没有办法改变URL的哈希值而不在浏览器的历史记录中留下条目而不重新加载? 或者做同等的?

至于具体细节,我正在开发一些基本的哈希导航:

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

显然,使用jQuery。 这个想法是在这个具体的例子中1)让用户回过头来改变每个标签可以有效地打破后退按钮' 通过堆积不必要的引用,以及2)如果它们达到刷新状态,则不保留它们当前所处的选项卡是一种烦恼。

5个解决方案
94 votes
location.replace("#hash_value_here"); 

以上似乎就是你所追求的。

Matt answered 2019-08-13T23:30:59Z
79 votes

#对我来说很好,直到我发现它不能在IOS Chrome上运行。 在这种情况下,使用:

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState()的运行方式与history.pushState()完全相同,只是replaceState()修改当前历史记录条目而不是创建新条目。

请记住保留#或网址的最后部分将被更改。

Lucia Lu answered 2019-08-13T23:30:35Z
6 votes

编辑:现在已经有几年了,浏览器也在不断发展。

@Luxiyalu的答案是要走的路

- 老答案 -

我也认为这是不可能的(此时)。 但是,如果您不打算使用它,为什么还需要更改哈希值呢?

我认为我们将哈希值用作程序员的主要原因是让用户为我们的页面添加书签,或者在浏览器历史记录中保存状态。 如果您不想做任何此类操作,那么只需将状态保存在变量中,然后从那里开始工作。

我认为使用哈希的原因是使用一个不受我们控制的值。 如果你不需要它,那么它可能意味着你拥有一切在你控制之下,所以只需将状态存储在变量中并使用它。 (我喜欢重复自己)

我希望这能够帮到你。 也许有一个更容易解决问题的方法。

更新:这个怎么样:

  1. 设置第一个哈希,并确保它保存在浏览器历史记录中。
  2. 当选择一个新选项卡时,请执行window.history.back(1),这将使历史记录从您的第一个init哈希返回。
  3. 现在您设置了新哈希,因此Tab键只会在历史记录中创建一个条目。

您可能必须使用一些标志,以了解当前条目是否可以被删除" 回去,或者如果你只是跳过第一步。并确保,你的加载方法为"哈希" 当您强制执行history.back时,不会执行。

guzart answered 2019-08-13T23:32:43Z
-1 votes

您始终可以创建一个事件侦听器来捕获超链接上的单击事件,并在回调函数中放置e.preventDefault(),这将阻止浏览器将其插入到历史记录中。

Ayman Farhat answered 2019-08-13T23:33:08Z
-1 votes
history.replaceState(undefined, undefined, "#profileInfo")

其中#profileInfo是您的ID。

Devang answered 2019-08-13T23:33:33Z
translate from https://stackoverflow.com:/questions/2305069/can-you-use-hash-navigation-without-affecting-history