在 unbeforeunload 上更改 location.hash

Question

我有一个使用 JavaScript 生成的页面。我想将$(window).scrollTop() 值存储在哈希中（如#position=xxx），这样当刷新页面并再次生成项目时，用户可以从他们离开的地方继续滚动。

我正在尝试修改beforeunload 上的哈希，这似乎不起作用。下面函数的第一部分尝试更改哈希，第二部分负责在页面加载时修改 scrollTop。第二部分工作正常，我只坚持第一部分。

$(window).on('beforeunload',function(){
    window.location.hash = "position="+$(window).scrollTop();
}).on('load hashchange',function(){
    var scrollregex = /^position=(\d+)$/,
        hash = window.location.hash.substring(1);
    if (scrollregex.test(hash)) $(window).scrollTop(parseInt(hash.match(scrollregex)[1]));
});

是否有不同的事件，或者当用户触发刷新时如何更改哈希？

Answer 1

我最终放弃了哈希的想法，并采用了基于 sessionStorage 的方法。我为会话/本地存储写了my own wrapper，我在以下示例中使用。

$(window).on('beforeunload',function(){
    var scrltop = $(window).scrollTop();
    if (scrltop > 0) SStorage.set('position',scrltop);
    else SStorage.del('position');
}).on('load',function(){
    if (SStorage.has('position')){
        var pos = parseInt(SStorage.get('position'));
        if (!isNaN(pos) && $(window).scrollTop() === 0) $(window).scrollTop(pos);
    }
});

Answer 2

Chrome 似乎不允许您在 onbeforeunload 事件中更新哈希值。我有一个类似的问题。我将我的代码移至卸载事件，该事件有效但引入了其他问题。为了解决这些问题，我必须强制重新加载，注意如果没有 setTimeout，重新加载将无法工作。

$(window).on('unload', function(){ 
    /* Do hash change here */

    setTimeout(function () { window.location.reload(true); }, 0); 
});