可以使用哈希导航而不影响历史记录吗?
恐怕这可能不可能,但有没有办法更改 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)不保留他们所在的选项卡当前如果点击刷新就会很烦人。
I'm afraid it might be impossible but is there a way to change the hash value of a URL without leaving an entry in the browser's history and without reloading? Or do the equivalent?
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 instance 1) 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 on if they hit refresh is an annoyance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
location.replace("#hash_value_here");
对我来说工作得很好,直到我发现它在 IOS Chrome 上不起作用。在这种情况下,请使用:请记住保留
#
,否则 url 的最后部分将被更改。location.replace("#hash_value_here");
worked fine for me until I found that it doesn't work on IOS Chrome. In which case, use:Remember to keep the
#
or the last part of the url will be altered.上面的内容似乎符合您的要求。
The above seems to do what you're after.
编辑:已经过去几年了,浏览器也在不断发展。
@Luxiyalu的答案是要走的路
--旧答案--
我也认为是这样不可能(此时)。但是,如果您不打算使用哈希值,为什么需要更改它呢?
我相信我们作为程序员使用哈希值的主要原因是让用户为我们的页面添加书签,或者在浏览器历史记录中保存状态。如果您不想执行任何操作,只需将状态保存在变量中,然后从那里开始工作。
我认为使用哈希的原因是要处理我们无法控制的值。如果您不需要它,那么这可能意味着您可以控制一切,因此只需将状态存储在变量中并使用它即可。 (我喜欢重复自己)
我希望这对你有帮助。也许有一个更简单的解决方案可以解决您的问题。
更新:
怎么样:
window.history.back(1)
,这将使历史记录从您的第一个初始化哈希返回。您可能需要使用一些标志,才能知道当前条目是否可以通过返回来“删除”,或者是否只是跳过第一步。
并确保当您强制
history.back
时,您的“哈希”加载方法不会执行。Edit: It's been a couple years now, and browsers have evolved.
@Luxiyalu's answer is the way to go
--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:
window.history.back(1)
, that will make the history go back from your first init hash.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
.您始终可以创建一个事件侦听器来捕获超链接上的单击事件,并在回调函数中放置 e.preventDefault(),这应该阻止浏览器将其插入历史记录中。
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.