Javascript 您可以在不影响历史记录的情况下使用哈希导航吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2305069/
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
Can you use hash navigation without affecting history?
提问by Matt
I'm afraid it might be impossiblebut is there a way to change the hash value of a URL without leaving an entry in the browser's historyand without reloading? Or do the equivalent?
恐怕这可能是不可能的，但是有没有一种方法可以更改 URL 的哈希值，而无需在浏览器的历史记录中留下条目并且无需重新加载？或者做等价的？
As far as specifics go, I was developing some basic hash navigation along the lines of:
就具体细节而言，我正在开发一些基本的哈希导航：
//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);
}
Using jQuery, obviously. The idea is that in this specific instance1) making the user go back over every tab change could effectively 'break the back button' by piling up needless references, and 2) not retaining which tab they're currently onif they hit refresh is an annoyance.
显然，使用 jQuery。这个想法是，在这个特定的例子中1）让用户返回每个选项卡更改可以通过堆积不必要的引用来有效地“打破后退按钮”，并且 2）如果他们点击刷新，则不保留他们当前所在的选项卡是一个烦恼。
采纳答案by Lucia
location.replace("#hash_value_here");worked fine for me until I found that it doesn't work on IOS Chrome. In which case, use:
location.replace("#hash_value_here");对我来说很好用，直到我发现它在 IOS Chrome 上不起作用。在这种情况下，请使用：
history.replaceState(undefined, undefined, "#hash_value")
history.replaceState()operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
history.replaceState() 的操作与 history.pushState() 完全一样，除了 replaceState() 修改当前历史条目而不是创建新历史条目。
Remember to keep the #or the last part of the url will be altered.
请记住保留#url 的最后一部分或将被更改。
回答by Matt
location.replace("#hash_value_here");
The above seems to do what you're after.
以上似乎做你所追求的。
回答by guzart
Edit:It's been a couple years now, and browsers have evolved.
编辑：现在已经有几年了，浏览器已经发展了。
@Luxiyalu's answeris the way to go
@Luxiyalu的答案是要走的路
--Old Answer--
--旧答案--
I too think it is impossible (at this time). But why do you need to change the hash value if you are not going to use it?
我也认为这是不可能的（此时）。但是，如果您不打算使用它，为什么需要更改哈希值呢？
I believe the main reason why we use the hash value as programmers is to let the user bookmark our pages, or to save a state in the browser history. If you don't want to do any of this, then just save the state in a variable, and work from there.
我相信我们作为程序员使用哈希值的主要原因是让用户为我们的页面添加书签，或者在浏览器历史记录中保存状态。如果你不想做任何这些，那么只需将状态保存在一个变量中，然后从那里开始工作。
I think that the reason to use a hash is to work with a value that is out of our control. If you don't need it, then it probably means you have everything under your control, so just store the state in a variable and work with it. (I like repeating myself)
我认为使用散列的原因是使用我们无法控制的值。如果您不需要它，那么这可能意味着您可以控制一切，因此只需将状态存储在变量中并使用它即可。（我喜欢重复自己）
I hope this helps you out. Maybe there's an easier solution to your problem.
我希望这能够帮到你。也许有更简单的方法可以解决您的问题。
UPDATE:How about this:
更新：这个怎么样：
- Setup a first hash, and make sure it gets saved in the browser history.
- When a new tab gets selected, do
window.history.back(1), that will make the history go back from your first init hash. - Now you set the new hash, therefore the tabbing will only make one entry in the history.
- 设置第一个哈希，并确保它保存在浏览器历史记录中。
- 当一个新选项卡被选中时，执行
window.history.back(1)，这将使历史从您的第一个 init 哈希返回。 - 现在您设置了新的哈希值，因此制表符只会在历史记录中创建一个条目。
You'll probably have to use some flags, to know if the current entry can be "deleted" by going back, or if you just skip the first step.
And to make sure, that your loading method for the "hash" doesn't execute, when you force the history.back.
您可能必须使用一些标志，以了解是否可以通过返回来“删除”当前条目，或者是否可以跳过第一步。并确保当您强制使用history.back.
回答by Ayman Farhat
You can always create an event listener to catch click events on the hyperlink and in the callback function put e.preventDefault(), that should prevent the browser from inserting it into the history.
您始终可以创建一个事件侦听器来捕获超链接上的点击事件，并在回调函数中放置 e.preventDefault()，这应该可以防止浏览器将其插入到历史记录中。
