你可以使用哈希导航而不影响历史吗?

96 javascript jquery browser-history fragment-identifier browser-state

恐怕这可能是不可能的,但有没有办法改变一个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);
    }
Run Code Online (Sandbox Code Playgroud)

显然,使用jQuery.这个想法是在这个具体的例子中 1)让用户回过头来更改每个标签可以通过堆积不必要的引用来有效地"打破后退按钮",以及2)如果他们点击刷新,则不保留他们当前所在的选项卡是烦恼.

Mat*_*att 95

location.replace("#hash_value_here"); 
Run Code Online (Sandbox Code Playgroud)

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

  • `window.location.replace((''+ window.location).split('#')[0] +'#'+ hash);`只是更新哈希 (14认同)
  • 借调这种方法,更清洁,希望它被标记为正确的答案. (7认同)
  • 就是这个.如果你有uri段,location.replace(window.location +"#hash")将保留它们. (4认同)
  • 请注意 location.replace('#hash_value_here') 只更改哈希片段而不是路径,因此它不会触发页面加载......除非文档包含基本标签:`<base href ="http ://example.com/" />` 如果它确实包含一个基本标签,那么当你使用带有前导 `"#hash_value_here"` 的替换方法时,它实际上就像你说的是 `location.replace(' http://example.com/#hash_value_here')。当您在这里阅读它时,这似乎很明显,但是当您在带有路径片段的页面上并且没有意识到 base 已设置时,这是一个问题。 (2认同)

Luc*_*cia 85

location.replace("#hash_value_here");对我来说很好,直到我发现它在IOS Chrome上不起作用.在这种情况下,使用:

history.replaceState(undefined, undefined, "#hash_value")
Run Code Online (Sandbox Code Playgroud)

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

请记住保持#网址或网址的最后一部分会被更改.

  • 注意:有趣的是,“history.replaceState(...)”不会触发“window.onhashchange”事件。`location.replace` 可以。很奇怪,对吧? (4认同)
  • 完全是现代浏览器的出路; 请注意[部分支持](http://caniuse.com/#feat=history)会话历史记录管理. (3认同)
  • @BramVanroy不,使用后者就足够了. (2认同)
  • 除非您使用 :target 选择器……否则历史函数是无用的,因为规范的那部分(与历史操作的 css 交互)目前似乎尚未定义,并且大多数/所有浏览器都不会在历史替换时重新计算样式。 (2认同)
  • 请注意:“history.replaceState()”和“location.replace()”仍然会在 Chrome 历史记录中创建条目,这在某些情况下可能被认为是不可接受的:/sf/ask/1875519131/ -仍然将条目添加到浏览历史记录中 (2认同)

guz*_*art 6

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

@Luxiyalu的答案是要走的路

- 旧答案 -

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

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

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

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

更新: 这个怎么样:

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

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