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

发布于 2024-08-22 17:53:50 字数 1230 浏览 7 评论 0原文

恐怕这可能不可能,但有没有办法更改 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

红墙和绿瓦 2024-08-29 17:53:50

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

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

历史记录。 ReplaceState() 的操作与history.pushState() 完全相同,不同之处在于replaceState() 修改当前历史条目而不是创建新条目。

请记住保留 #,否则 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:

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.

Remember to keep the # or the last part of the url will be altered.

書生途 2024-08-29 17:53:50
location.replace("#hash_value_here"); 

上面的内容似乎符合您的要求。

location.replace("#hash_value_here"); 

The above seems to do what you're after.

愛上了 2024-08-29 17:53:50

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

@Luxiyalu的答案是要走的路

--旧答案--

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

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

我认为使用哈希的原因是要处理我们无法控制的值。如果您不需要它,那么这可能意味着您可以控制一切,因此只需将状态存储在变量中并使用它即可。 (我喜欢重复自己)

我希望这对你有帮助。也许有一个更简单的解决方案可以解决您的问题。

更新:
怎么样:

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

您可能需要使用一些标志,才能知道当前条目是否可以通过返回来“删除”,或者是否只是跳过第一步。
并确保当您强制 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:

  1. Setup a first hash, and make sure it gets saved in the browser history.
  2. When a new tab gets selected, do window.history.back(1), that will make the history go back from your first init hash.
  3. Now you set the new hash, therefore the tabbing will only make one entry in the history.

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.

完美的未来在梦里 2024-08-29 17:53:50

您始终可以创建一个事件侦听器来捕获超链接上的单击事件,并在回调函数中放置 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文